如何在javascript中設置時間延遲

我在我的網站上有一段js切換圖像，但當您第二次單擊圖像時需要延遲。延遲應該是1000ms。所以你會點擊img.jpg然後img_onclick.jpg會出現。然後，您將點擊img_onclick.jpg圖像，然後在再次顯示img.jpg之前延遲1000毫秒。如何在javascript中設置時間延遲

下面是代碼：

jQuery(document).ready(function($) { 

    $(".toggle-container").hide(); 
    $(".trigger").toggle(function() { 
     $(this).addClass("active"); 
     $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg'); 
    }, function() { 
     $(this).removeClass("active"); 
     $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg'); 
    }); 
    $(".trigger").click(function() { 
     $(this).next(".toggle-container").slideToggle(); 
    }); 
});

來源

2013-07-26 Blue Orange

'的setTimeout（函數（）{/ * YourCode * /}，1000）;' – marteljn

的[可能重複是否有某種方式來引入延遲在JavaScript？]（http://stackoverflow.com/questions/24849/is-there-some-way-to-introduce-a-delay-in-javascript） – Lloyd

儘管可能尋找'.stop（）'。看看這裏http://api.jquery.com/stop/ –

218

使用setTimeout()：

var delayInMilliseconds = 1000; //1 second 

setTimeout(function() { 
    //your code to be executed after 1 second 
}, delayInMilliseconds);

如果你想這樣做沒有setTimeout：參考this question。

來源

2013-07-26 14:15:11

如何做到同步？ setTimeout中的代碼無法識別類屬性。 – ishandutta2007

setTimeout(function(){ 


}, 500);

將您的代碼{ }

500的內部=0.5秒

2200 =2.2秒

等

來源

2014-10-10 19:05:58 maudulus

有兩種（大多使用）類型計時器的功能在javascript setTimeout和setInterval（other）

這兩種方法都具有相同的簽名。他們以回呼功能和延遲時間爲參數。

setTimeout在延遲後僅執行一次，而setInterval在延遲毫秒後繼續調用回調函數。

這兩個方法都會返回一個整數標識符，可以在定時器到期之前使用它來清除它們。

clearTimeout和clearInterval這兩種方法採取從上述功能setTimeout和setInterval

返回一個整數標識符示例：

setTimeout

alert("before setTimeout"); 

setTimeout(function(){ 
     alert("I am setTimeout"); 
    },1000); //delay is in milliseconds 

    alert("after setTimeout");

如果運行上面的代碼你會看到它提示before setTimeout然後after setTimeout最後它會提醒I am setTimeout後1秒（1000毫秒）

什麼，你可以從示例注意的是，該setTimeout(...)是異步的，這意味着它不會等待計時器之前得到經過去下一個陳述我。Ëalert("after setTimeout");

例子：

setInterval

alert("before setInterval"); //called first 

var tid = setInterval(function(){ 
     //called 5 times each time after one second 
     //before getting cleared by below timeout. 
     alert("I am setInterval"); 
    },1000); //delay is in milliseconds 

    alert("after setInterval"); //called second 

setTimeout(function(){ 
    clearInterval(tid); //clear above interval after 5 seconds 
},5000);

如果你運行上面的代碼，你會看到，它提醒before setInterval然後after setInterval最後它提醒I am setInterval 5秒後1秒（1000毫秒），因爲setTimeout 5秒鐘後清除計時器，否則每1秒鐘您將獲得警報I am setInterval無限。

瀏覽器在內部如何做到這一點？

我會簡單介紹一下。

要了解您必須瞭解JavaScript中的事件隊列。瀏覽器中實現了一個事件隊列。每當一個事件在js中被觸發，所有這些事件（比如點擊等等）都被添加到這個隊列中。當您的瀏覽器無法執行時，它會從隊列中取出一個事件並逐個執行它們。

現在，當您撥打setTimeout或setInterval時，您的回調將被註冊到瀏覽器中的計時器，並在給定時間過期後被添加到事件隊列中，並最終由JavaScript從隊列中取出事件並執行它。

發生這種情況是因爲JavaScript引擎是單線程的，它們一次只能執行一件事。所以，他們不能執行其他JavaScript並跟蹤您的計時器。這就是爲什麼這些定時器在瀏覽器中註冊（瀏覽器不是單線程），它可以跟蹤定時器並在定時器到期後在隊列中添加一個事件。

只有在這種情況下，該事件纔會在指定的時間間隔內一次又一次地添加到隊列中，直到它被清除或刷新瀏覽器頁面爲止，纔會發生setInterval。

注意

傳遞給這些函數的延遲參數是最小延遲時間執行回調。這是因爲在定時器到期之後，瀏覽器將該事件添加到隊列中以由 javascript引擎執行，但執行回調取決於隊列中的事件位置，並且由於引擎是單線程的，因此將執行隊列中的所有事件一個接一個。

因此，當您的其他代碼阻塞線程並且沒有時間處理隊列中的內容時，您的回調可能需要超過指定的延遲時間。

正如我所說的JavaScript是單線程。所以，如果你長時間阻塞線程。

這樣的代碼

while(true) { //infinite loop 
}

您的用戶可以得到一個消息，說頁面不響應。

來源

2017-06-02 19:49:18

你能告訴我如何停止setTimeout（）的異步行爲嗎？ –

如果您需要刷新，這又是一個posibility：

setTimeout(function() { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

來源

2018-03-07 21:57:55 oOJITOSo

如何在javascript中設置時間延遲

回答

相關問題