Javascript 根据id对多个div使用相同的函数

我有一个函数，对一些div有效，每2秒一次，其中我想等待1秒来调用相同的方法，但给出其他div，效果，问题是我如何等待那一秒（目前每2秒所有div执行效果，我想在1秒的行中执行）

---

请看一看

您几乎完全正确，问题是您有函数调用，您需要传递函数本身。接受函数参数，因此需要向其传递函数

尝试（在

设置间隔内）

如果你想一个接一个地执行它们，你可以这样做

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

这里假设第二个行为是您想要的。
您几乎完全正确，问题是您有函数调用，需要传递函数本身。接受函数参数，因此需要向其传递函数

尝试（在
设置间隔内）

如果你想一个接一个地执行它们，你可以这样做

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

这里假设第二个行为是您想要的。
我不确定您是否想要循环动画，但无论哪种方式，您都应该使用
setTimeout
，并调用链中的每个元素：

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

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

我建议将效果存储在元素本身上，如
data effect=“ripping right”
中所示，因为似乎没有任何其他类型的可计算顺序。对于
nextID
，您可以使用
.next（）
元素，也可以在当前id中添加1。如果希望循环，则如果
$elem.length
为零，则将id重置为1。
我不确定是否要循环动画，但无论如何，您应该改用
setTimeout
，并调用链中的每个元素：

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

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

$(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);
} 

我建议将效果存储在元素本身上，如
data effect=“ripping right”
中所示，因为似乎没有任何其他类型的可计算顺序。对于
nextID
，您可以使用
.next（）
元素，也可以将1添加到当前id。如果希望此循环，则如果
$elem.length
为零，则将id重置为1

$(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);
} 

可能看起来像这样

可能看起来像这样
如果您希望对计时顺序进行更多的控制，您可以将元素之间的延迟传递给函数。通过这种方式，可以调整集合迭代之间的计时

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

如果您想在计时序列中获得更多的控制，您可以将元素之间的延迟传递给函数。通过这种方式，可以调整集合迭代之间的计时

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

2000毫秒！=1秒我猜是这样的？？有没有办法让它们都执行成一行（一秒钟的差异），当我看到你摆弄所有它们执行，然后等待并再次执行2000毫秒！=1秒我猜是这样的-，有没有办法让它们排成一行（一秒钟的差异），当我看到你摆弄它们时，然后等待并执行againI可能做错了代码看起来很有趣但无法正常工作我可能做错了代码看起来很有趣但无法正常工作