Question

嗨，我只是想知道如何执行带有延迟的for循环

var currentPosition2 = 1;
    for(i=0;i<numberOfSlides;i++) {
        //alert(currentPosition2);
        currentPosition2 = currentPosition2 + 1;
        jQuery('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition2)
        });             
    }

目前所有3个幻灯片一次都有动画，我想在每个循环之间延迟3秒，然后在循环开始前3秒，

任何帮助将不胜感激，

感谢

Answer 1

查看jQuery's .delay()，我认为它可以满足您的需求。否则setTimeout可能是要走的路。

Answer 2

我将for循环转换为具有延迟的递归函数。我不确定你正在使用currentPosition2做什么，所以这可能会有一个错误。

var currentPosition2 = 1;

function animateSlide() {
  // Set manualClickHappened to true if the user clicks a slide
  if (manualClickHappened) {
    return;
  }
  currentPosition2++;
  jQuery('#slideInner').animate({
    'marginLeft': slideWidth * (-currentPosition2)
  });
  if (currentPosition2 < numberOfSlides + 2) // Possible off-by-one
    window.setTimeout(animateSlide, 3 * 1000);
  }
}

window.setTimeout(animateSlide, 3 * 1000);

Answer 3

适合我：

var numberOfSlides = 5;
function animateSlides(currentPosition2){
    if(currentPosition2 < numberOfSlides){
        alert(currentPosition2);
        currentPosition2 = currentPosition2 + 1;
        var foo = (function(pos){
            return function(){
                animateSlides(pos);
            };
        })(currentPosition2);
        setTimeout(foo, 3000);
    }
}

animateSlides(1);

Answer 4

也许，大概是这样的。应该更好地清除runningIntervals中的清除间隔。

var currentPosition2 = 1;
var runningTimeouts = {};

var secondsBetween;

    for(i=0;i<numberOfSlides;i++) {
        //alert(currentPosition2);
        var j = i;  // use j, if you need i inside the closure (otherwise it wouldn't work)
        var id = setTimeout(function () {
            currentPosition2 = currentPosition2 + 1;
            jQuery('#slideInner').animate({
                'marginLeft' : slideWidth*(-currentPosition2)
            });                   
        }, (i+1)*secondsBetween);   
        runningTimeouts[i] = id;
    }
// then use runningTimeouts to kill timeouts prematurely
// clearTimeout(runningTimeouts[someKey])

Answer 5

使用现有代码，您需要的是：

var arrTimers = [];
for(var i = 0; i < numberOfSlides; i++) {
    //alert(currentPosition2);
    currentPosition2++;
    arrTimers.push(window.setTimeout(function() {
        jQuery('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition2)
        });
    }, i * 1000));
}

这将导致第一个动画立即发生，第二个动画在1秒后发生，第三个发生在2秒后等。

要停止使用此类代码的特定计时器：

window.clearTimeout(arrTimers[2]);

例如，这将阻止第三个动画发生。

清除所有计时器：

$.each(arrTimers, function(index, value) {
   window.clearTimeout(value);
});

如何在javascript中执行带延迟的for循环

5 个答案: