Question

我有一个功能，适用于一些div，每2秒，在它内部我想等1秒钟调用相同的方法，但给其他div，效果，问题是我怎么能等待那一秒（目前每一个2秒所有div执行效果，我想在1秒内执行）。

$(function () {
    index = 0;
    window.setInterval(function () {
        if (index > 10){ 
            index = 0;
        }    
        myFunction("so1", "flipping-right");
        //setTimeout(funcx, 1000);
        myFunction("so2", "flipping-left");        
        //setTimeout(funcx, 1000);
        myFunction("so3", "flipping-top");
        //setTimeout(funcx, 1000);
        myFunction("so4", "flipping-bottom");
        //setTimeout(funcx, 1000);
        myFunction("so5", "flipping-right");

        i++;
    }, 2000); 
});




myFunction = function (id, effect ) { 
    $('#' + id).toggleClass(effect);
}

请查看at my code

Answer 1

你几乎做对了，问题是你有函数调用，你需要传递函数本身。 setTimeout接受一个函数参数，因此您需要将函数传递给它。

尝试（在setInterval内）

setTimeout(function(){
    myFunction("so1", "flipping-right");
    myFunction("so2", "flipping-left");        
    myFunction("so3", "flipping-top");
    myFunction("so4", "flipping-bottom");
    myFunction("so5", "flipping-right");
}, 1000);

如果您想一个接一个地执行它们，您可以执行类似

的操作

 setTimeout(function(){
        myFunction("so1", "flipping-right");
 }, 1000);
 setTimeout(function(){
        myFunction("so2", "flipping-left");  
 }, 2000);
 setTimeout(function(){
        myFunction("so1", "flipping-right");
 }, 3000);
 setTimeout(function(){
       myFunction("so3", "flipping-top");
 }, 4000);
 setTimeout(function(){
        myFunction("so5", "flipping-right");
 }, 5000);

以下是the fiddle updated，假设第二种行为符合您的要求。

Answer 2

我不确定你是否要循环播放动画，但不管怎样，你应该使用setTimeout来调用链中的每个元素：

myFunction = function (id, effect ) { 
    var $elem = $('#' + id);

    if ($elem.length) {
        setTimeout(function () {
            $elem.toggle(effect);
            myFunction(nextID, nextFlippint);
        }, 2000);
    }
}

我建议将效果存储在data-effect="flipping-right"中的元素本身，因为似乎没有任何其他类型的可计算顺序。对于nextID，您可以使用.next()元素，也可以将1添加到当前ID。如果您希望循环，请在$elem.length为零时将ID重置为1。

Answer 3

$(function () {
index = 0;
var datas = [
["so1", "flipping-right"],
["so2", "flipping-left"],
["so3", "flipping-top"],
["so4", "flipping-bottom"],
["so5", "flipping-right"]
];
// 2sec to start animate
setTimeout(function  () {
    // 1sec loop
    window.setInterval(function () {
        if (index > 10){ 
            index = 0;
        }    
        myFunction( data[i][0], data[i][1]);
        i++;
    }, 1000); 
},2000)
});

myFunction = function (id, effect ) { 
  $('#' + id).toggleClass(effect);
}

可能看起来像这样

Answer 4

如果你想要更多控制时序，你可以将元素之间的延迟传递给函数。这样您就可以调整集合迭代之间的时间。

myFunction = function ($flip, delay) { 
    setTimeout(function(){
        var effect = "flipping-" + $flip.attr('data-direction');
        $flip.toggleClass(effect);
    },delay);
} 

$(function () {
    var timer = 0;
    $("[data-direction]").each(function(){
        myFunction($(this),timer);
        timer += 1000;
    });
});

根据id使用相同的函数作为几个div

4 个答案: