Question

我想在每个元素之间创建一个延迟，它必须是500毫秒。然而，目前已经有一个初步的延迟。我有一个解决方案，但它看起来很混乱，并希望它比我现在的更精简。

目前我已为两者添加了1500毫秒（启动延迟）。在第二个元素上，我将500ms（第二个元素延迟）添加到较早的值以实现最终结果。

我有这段代码：

if ( $('#brand').length ){
    setTimeout(function(){
        $('#elementA', $brand__service).toggleClass('superman--returns');
    }, 1500);

    setTimeout(function(){
        $('#elementB', $brand__service).toggleClass('birdman--helps');
    }, 2000);
}

任何想法如何实现更好的实践？我试过.promise（）/ .delay（）/ .done（）。无济于事。

Answer 1

目前还不是很清楚你想要什么，但主要是你可以迭代它们的一组项目，然后通过它们的指数乘以一个恒定的延迟率来延迟它们。

你可以使用jQuery的.queue()和.delay()来延迟添加一个类，因为这不仅仅是延迟（SO） - 可以说不是更好但是这是用jQuery实现它的方式。

jsfiddle

Answer 2

按照自己的方式行事并非完全错误。它可能变得难以保持更多的功能。

更简洁，更可持续的方法可能是使用setInterval()对某些函数执行常规调用，将任何操作委派给它，包括可选的clearInterval()。

一个例子：

HTML

<div id="first" class="simpleDiv">First div</div>
<div id="second" class="simpleDiv">Second div</div>
<div id="third" class="simpleDiv">Third div</div>

JS

var divRotationInterval = setInterval(function(){toggleClasses()}, 500);
var startingDiv = 1;

function toggleClasses() {
    switch(startingDiv) {
        case 1:
            $('#first').toggleClass('firstClass');
            break;
        case 2:
            $('#second').toggleClass('secondClass');
            break;
        case 3:
            $('#third').toggleClass('thirdClass');
            break;
    }

    startingDiv++;

    if(startingDiv > 3) {
        startingDiv = 1; //if you want to continue
        //stopRotationInterval(); // if you want to stop
    }
}

function stopRotationInterval() {
    clearInterval(divRotationInterval);
}

DEMO HERE

延迟 - 使用.toggleClass

2 个答案: