JavaScript / jQuery - 在添加和删除类与下一个函数之间添加延迟[重复]

Posted 2023-05-08

【中文标题】JavaScript / jQuery - 在添加和删除类与下一个函数之间添加延迟[重复]

【英文标题】：JavaScript/jQuery - Add Delay between Add and Remove Class and next function [duplicate]

【发布时间】：2012-09-01 20:57:36

【问题描述】：

可能重复：jquery add a fade to an .addClass

这是我的 jsFiddle 示例：http://jsfiddle.net/sLzGc/

我正在尝试创建选项 1 到 3 正在旋转的效果。每隔 1.2 秒，green 类就会从拥有它的选项中删除，green 类会添加到下一个选项中。这个想法是，在执行最终函数 alert('Finished') 之前，三个选项的轮换发生五次 (i<5)。

我正在尝试使用 setTimeout()，但我愿意使用 .delay()、另一个 jQuery 函数或其他选项。

这是我的 JavaScript/jQuery：

alert('Start');

sampleFunction();

function sampleFunction() 

for (i=0; i<5; i++) 

  setTimeout(function() 
    $('#option2').addClass('green');
    $('#option1').removeClass('green');
  ,1200);

  setTimeout(function() 
    $('#option3').addClass('green');
    $('#option2').removeClass('green');
  ,1200);

  setTimeout(function() 
    $('#option1').addClass('green');    
    $('#option2').removeClass('green');
  ,1200);

//end for loop



alert('Finished');​

我的整个例子都在 jsFiddle 上：http://jsfiddle.net/sLzGc/

感谢您提供的任何帮助或见解！

【参考方案1】：

这是我解决问题的方法：

​(​function() 
    var options = [$("#option1"), $("#option2"), $("#option3")],
        cycles = 5,
        i = 0,
        $last = $(null);

    (function next()  
        if(i < cycles * options.length) 
            $last.removeClass("green");
            $last = options[i % options.length].addClass("green");
            i++;
            setTimeout(next, 1200);
         else 
            $last.removeClass("green");
            alert("finished!"); //do any other "we're done" stuff here.
        
    ());
());​

这很简单，很酷的部分是您可以将元素添加到元素列表中以非常容易地循环（只需将它们添加到options）。如果需要，您还可以设置周期数。我没有将类或延迟长度设为变量，但如果您想这样做，那将非常简单。

您可以在此处查看演示：

http://jsfiddle.net/D7SR8/

您还可以考虑在末尾添加一个回调函数并将alert() 放入其中。这样会更可重用。

【讨论】：

+1 非常干净、简单且易于定制。

作为一种可能的改进，您也可以只获取具有特定类的所有元素。这样您就不必单独列出每个选择器。 jsfiddle.net/D7SR8/2

同意，@JoshMein，但您将无法控制它选择每个项目的顺序。像这样控制可能更容易。不过，很酷的是，由于它使用 jQuery 对象，如果您愿意，您可以一次突出显示一堆。归根结底，它实际上是一段方便的代码。 :-)

@Pete 非常酷的解决方案！我添加了一个变量count = options.length。谢谢！

【参考方案2】：

如果您想使用 setTimeouts，那么您的代码可能如下所示：

var iteration = 0;
alert('start');
rotateColors();

function rotateColors() 
    setTimeout(function() 
        $('#option2').addClass('green');
        $('#option1').removeClass('green');
            setTimeout(function() 
                $('#option3').addClass('green');
                $('#option2').removeClass('green');
                setTimeout(function() 
                    $('#option1').addClass('green');    
                    $('#option3').removeClass('green');
                    iteration += 1;

                    if(iteration < 5)
                        rotateColors();
                    else
                        alert('finished');
            ,1200);
        ,1200);
    ,1200);   

Live DEMO

【讨论】：

@Mark Rummel 如果可以的话，我也会尝试考虑一个更简洁的 jquery 版本。

谢谢！我有你的解决方案工作！感谢 jsFiddle 演示！一个更干净的 jQuery 解决方案会很好。我也在审查 Pete 的解决方案，因为它听起来会在未来提供更大的灵活性，但你的回答肯定解决了我所需要的！再次感谢！

@MarkRummel 我停止了更清洁的解决方案，因为皮特提供的与我的想法相似。不过，请务必查看我对他的代码的简短说明，这将使您更轻松。我在他的答案的 cmets 中附加了一个 jsfiddle。

【参考方案3】：

alert('Start');
 var varobj=0;
sampleFunction();

function sampleFunction() 
setTimeout(function() 
    $('#option2').addClass('green');
    $('#option1').removeClass('green');

  ,1200, setTimeout(function() 
        $('#option3').addClass('green');
        $('#option2').removeClass('green');

      ,1200,setTimeout(function() 
            $('#option1').addClass('green');    
            $('#option3').removeClass('green'); if(varobj<5)varobj=varobj+1;sampleFunction();else alert('finished');
      ,1200);););

这是在 settimeout 中执行其他函数后调用函数的方法

【参考方案4】：

我同时使用 setTimeout() 和 setInterval() 来执行此操作，然后在 5 次执行后清除间隔。如果您希望它们都以某种颜色或任何其他修改结束，请告诉我！我刚刚对其进行了修改以遍历您的询问方式。 http://jsfiddle.net/sLzGc/9/

sampleFunction();

function sampleFunction() 
    alert('Start');
    $('#option1').addClass('disabled');

    var i = 0;
    var shift = function() 
        setTimeout(function() 
            $('#option1').toggleClass('disabled');
            $('#option2').toggleClass('disabled');
        , 0);
        setTimeout(function() 
            $('#option2').toggleClass('disabled');
            $('#option3').toggleClass('disabled');
        , 400);
        setTimeout(function() 
            $('#option3').toggleClass('disabled');
            $('#option1').toggleClass('disabled');
        , 800);
    ;
    var interval = setInterval(function() 
        ++i;
        if (i == 5) 
            clearTimeout(interval);
            alert('Finished');
         else 
            shift();
        
    , 1200);

    shift();
​