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中的回调参数。

编辑：查看John 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

我建议你在fadeIn完成后执行setTimeout。否则，如果你的延迟比你的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);      
        });

    }
}

循环函数（Javascript回调帮助）

3 个答案: