jQuery的延遲的.html後被忽視（）調用

Question

我試圖將圖像加載後引入的延遲，但它使跳過

$(\"#output\").html(\"<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>\").delay(5000); 

我已經嘗試了上面的代碼中的許多版本的.delay（）但它仍然劑量工作

欣賞幫助傢伙。

Answer 1

AFAIK delay()函數只是延遲隊列中的函數。所以你需要在delay()之後調用另一個函數。

也許你可以試試

.delay(5000).finish(); 

Answer 2

從jQuery documentation

的.delay（）方法是最適合的jQuery排隊效果 之間延遲。因爲它是有限的 - 例如，它不提供一種方式來取消延遲 - .delay（）不是替代JavaScript的原生 setTimeout函數，這可能更適合某些使用 的情況。

你的圖像加載，那麼延遲觸發，那麼......這是給你接下來會發生什麼。但由於.delay附加到#output，因此只能使用#output做一些事情。例如，你可以淡出它。

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").delay(5000).fadeOut(); 

http://jsfiddle.net/M2GRj/

如果你想擁有映像加載之前的延遲，然後用你的延遲設置HTML之前。

$("#output").hide().delay(5000).html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").fadeIn(); 

http://jsfiddle.net/M2GRj/3/

如果你想誘使暫停圖像加載，然後使一些獨立的，那麼給你的圖像的ID，並呼籲與setTimeout的功能上的負載事件之後。

$("#output").html("<center><img id='img1' src='http://i.imgur.com/GM6KJdh.gif' /></center>"); 
// Note: You can only use this after #img1 has been added to the DOM 
$('#img1').load(function(){setTimeout('alert("hello")',5000);}); 

http://jsfiddle.net/M2GRj/5/

Answer 3

作爲jQuery文檔中說明的那樣，.delay()是隻有延遲後續的動畫（在相同的元素）一個jQuery動畫製作方法，它不會延遲非動畫製作方法的結果，並且沒有按't'暫停'代碼執行。因此，在顯示的代碼之後的任何代碼行都會立即執行。

假定你正在試圖做的是執行的下一行（S），你可以做到這一點之前，等待兩秒鐘：

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>"); 
setTimeout(function() { 
    // your other code here 
}, 2000); 

它使用JavaScript的內置setTimeout() function延遲的任何代碼執行你放入你傳遞給它的函數。

Answer 4

jQuery的API說：

.delay（）方法允許我們以延遲該 跟隨它在隊列功能的執行。它可以與標準效果隊列 或自定義隊列一起使用。只有在隊列中的後續事件被延遲

作爲一個例子檢查下面

以下語句當被執行時，元件滑動開300毫秒，然後400毫秒淡入之前暫停800毫秒。

$('#foo').slideUp(300).delay(800).fadeIn(400); 

如果你沒有延遲後的任何後續事件，那麼你可以使用JavaScript's native setTimeout function

如何使用setTimeout function？

setTimeout(function() { 
    //your code 
}, 2000); // will work with every browser 

欲瞭解更多信息檢查.delay()和setTimeout