循环函数(Javascript回调帮助）

Looping Function (Javascript Callback Help)

本文关键字：帮助 回调 Javascript 函数 循环      更新时间：2024-03-07

我对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毫秒。

如有任何帮助，我们将不胜感激。谢谢

这可能对你有用，在末尾添加它来代替最后一行：

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

并删除slide_function中的回调参数。

编辑：查看下方John T的评论

我建议您在fadeIn完成后执行setTimeout。否则，如果您的延迟比您的淡入时间短，您将遇到同时尝试淡入和淡出的问题。

尝试重新排列代码如下：

// 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);      
        });
    }
}

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);
相关文章：