復位一段時間

Question

奮力鍛鍊後的setTimeout其中「clearTimeout」將適合在這個流：

$(window).ready(function() { 

    setTimeout(function() { 
    $('.hoverone').addClass('flip'); 
    }, 2000); 

    setTimeout(function() { 
    $('.hovertwo').addClass('flip'); 
    }, 2500); 

    setTimeout(function() { 
    $('.hoverone').removeClass('flip'); 
    }, 4000); 

    setTimeout(function() { 
    $('.hovertwo').removeClass('flip'); 
    }, 4500); 

}); 

一旦最後一個行動已經取得了 - 我想計時器重置和流向重新開始。我嘗試了clearTimeout，但我需要完成一個非常特定的定時操作流程。

Answer 1

我建議你用一個函數來包裝所有你設置的超時時間。這樣你就不需要清除超時。

var intervalFunction = function(){ 
    setTimeout(function() { 
    $('.hoverone').addClass('flip'); 
    }, 2000); 

    setTimeout(function() { 
    $('.hovertwo').addClass('flip'); 
    }, 2500); 

    setTimeout(function() { 
    $('.hoverone').removeClass('flip'); 
    }, 4000); 

    setTimeout(function() { 
    $('.hovertwo').removeClass('flip'); 
    intervalFunction(); 
    }, 4500); 
} 

$(window).ready(intervalFunction); 

Answer 2

這裏是爲別人尋找的答案 - 感謝

$(window).ready(function flow(){   


    setTimeout(function() { 
    $('.hoverone').addClass('flip'); 
}, 
    2000); 

    setTimeout(function() { 
    $('.hovertwo').addClass('flip'); 
}, 
    2500); 

    setTimeout(function() { 
    $('.hoverone').removeClass('flip'); 
}, 
    4000); 

    setTimeout(function() { 
    $('.hovertwo').removeClass('flip'); 
}, 
    4500); 

setInterval(flow, 8000); 


}); 

Answer 3

我會嘗試這樣的事：

$(window).ready(function() { 

    //all setTimeouts start (almost) the same time 
    var time1 = 2000, 
     time2 = time1 + 500, 
     time3 = time2 + 1500, 
     time4 = time3 + 500, 
     repeatTime = time4 + 1000; //delay before the restart 

    //this will run again and again until you stop it 
    //basically it will start over after 1 second after the 4th settimeout is finished 
    var Fn = setInterval(function() { 
    setTimeout(function() { 
     $('.hoverone').addClass('flip'); 
    }, time1); 

    setTimeout(function() { 
     $('.hovertwo').addClass('flip'); 
    }, time2); 

    setTimeout(function() { 
     $('.hoverone').removeClass('flip'); 
    }, time3); 

    setTimeout(function() { 
     $('.hovertwo').removeClass('flip'); 
    }, time4); 
    }, repeatTime); 

    //this is how you stop it from repeating anymore 
    //clearInterval(Fn); 
}); 

我認爲這是不言自明，但隨時進一步質疑。

Answer 4

要重複這些時間事件，您應該使用setInterval。

$(window).ready(function(){  
    var halfSeconds = 0; 
    var timer = setInterval(function() { 
     halfSeconds = (halfSeconds + 1) % 12; // change the 12 to adjust repeat-delay 
     if (halfSeconds === 4) $('.hoverone').addClass('flip'); 
     if (halfSeconds === 5) $('.hovertwo').addClass('flip'); 
     if (halfSeconds === 8) $('.hoverone').removeClass('flip'); 
     if (halfSeconds === 9) $('.hovertwo').removeClass('flip'); 
    }, 
    500); 

    // Optional: if you have an event that should stop the repetition: 
    $('#myStopButton').click(function() { 
     clearInterval(timer); 
    }); 
}); 

這也將是有用的，以保持從setInterval返回值，以便您可以停止動畫當一些事件發生時（如在「停止」點擊：另外，您可以在一個功能相結合的四個動作按鈕）。

Answer 5

JsFiddle

$(window).ready(function(){  
var hoverone,hovertwo; 
call(); 
function call(){ 
     hoverone= setTimeout(function() { 
      $('.hoverone').addClass('flip'); 
      clearTimeout(hovertwo); 
      call1(); 
     }, 
     2000); 
    } 

    function call1(){ 
      hovertwo = setTimeout(function() { 
      $('.hovertwo').addClass('flip'); 
      clearTimeout(hoverone); 
      call2(); 
     }, 2500); 
    } 
    function call2(){ 
      hovertwo = setTimeout(function() { 
      $('.hoverone').removeClass('flip'); 
      clearTimeout(hoverone); 
      call3(); 
     }, 2500); 
    } 
    function call3(){ 
      hovertwo = setTimeout(function() { 
      $('.hovertwo').removeClass('flip'); 
      clearTimeout(hoverone); 
      call(); 
     }, 2500); 
    } 
});