Looping Function (Javascript Callback Help)

Question

Я не очень много работал с функциями Javascript и пытаюсь получить функцию, чтобы зациклиться после короткой задержки. Я, кажется, какой-то код, используя SetTimeout(), но я не могу показаться, чтобы выяснить, как заставить его работать в моем случае, вот мой код:

var number = 8; 
var iter = 1; 

function slide_function(iter, amount, callback){  
    if(iter<amount){ 
     console.log('test'); 

     $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){   
      $(this).next('span').fadeIn();  
     }); 

     var iter = iter + 1; 
    } 
    else if(iter==amount){ 
     console.log('test2'); 

     var iter = 1; 

     $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){   
      $(this).next('span').fadeIn();  
     }); 

     var iter = iter + 1; 
    } 
} 

slide_function(iter, number, setTimeout(slide_function(iter, number),5000)); 

Я пытаюсь в основном создать небольшой слайд-шоу когда элементы исчезают и выходят до определенной точки, а затем начинаются снова. Он работает в первый раз через функцию, но затем не запускает ее снова. Я сделал некоторые ошибки, когда он вызвал бесконечный цикл, где он в значительной степени разбил мой браузер, поэтому я слегка ступаю в этот момент.

Я предполагаю, что проблема заключается в моей функции обратного вызова? Я пытаюсь сделать задержку 5000 мс, прежде чем функция снова запустится.

Любая помощь была бы принята с благодарностью. Благодаря!

Answer 1

Это может быть, работает для вас, добавьте это в конце замены последней строки:

setInterval(function(){ 
    slide_function(iter,number) 
},5000); 

И удалить аргумент обратного вызова в slide_function.

EDIT: комментарий Checkout Джона T в ниже

Answer 2

ответа работ Sirikon, в качестве альтернативы, чтобы цепь вызовов изнутри slide_function, также этот код избежать глобал. Не проверено, поэтому, вероятно, есть несколько ошибок.

function slideShow(iter, amout) { 
    function slide_function(){ 
     // Using mod operations is the common way to handle looping around the end 
     iter = iter % amount; 
     $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){   
      $(this).next('span').fadeIn();  
     }); 
     // You were using var, so you were creating a new variable instead 
     // of modifying the shared variable 
     iter++; 
    } 

    setTimeout(slideShow, 5000); 
} 
slideShow(0,8); 

Answer 3

Я предлагаю вам установить setTimeout после завершения fadeIn. В противном случае вы столкнетесь с проблемами попыток fadein и fadeout в то же время, если ваша задержка короче, чем ваша fadeIn.

Попробуйте перестраивает ваш код выглядеть так:

// starts at 1, ends at 8 
slide_function(1, 8); 

function slide_function(iter, amount) { 

    // defines a function called runAgain inside slide_function() 
    var runAgain = function() { 
     // setTimeout takes in a function as the first parameter and delay as the second one 
     setTimeout(function() { 
      // inside the function, run slide function with an incremented iter 
      slide_function(iter+1, amount); 
     }, 5000); 
    } 

    if(iter<amount){ 
     console.log('test'); 
     $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){   
      $(this).next('span').fadeIn(runAgain);  
     }); 

    } 
    else if(iter==amount){ 
     console.log('reached the limit, resetting iter to 1'); 
     iter = 1; 
     $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){   
      $(this).next('span').fadeIn(runAgain);  
     }); 

    } 
}