用jquery添加一個延遲

我想使用方法.delay()等待1秒鐘，然後再更改元素的內容。在我的頁面中，我有一個按鈕，當完成ajax請求時，按鈕顯示「完成」。之後，我想等待1秒鐘並顯示「下載」。但問題是「下載」在「完成」之後立即顯示，沒有延遲。用jquery添加一個延遲

這裏是我的代碼：

$('#chocobo').click(function(){ 
    $('#chocobo').html('<div id="banana" class="fa fa-refresh fa-spin"></div>&nbspLoading'); 
    $.post("includes/modlist/pack.php",function(data){ 
     //$('#banana').addClass("fa-spin"); 
     $('#chocobo').addClass('done'); 
     $('#chocobo').html('<div id="banana" class="fa fa-check"></div>&nbspDone'); 
     $('#chocobo').delay(1000).html('<div id="banana" class="fa fa-refresh"></div>&nbspDownload');   
    }); 
});

有人能幫助我嗎？

來源

2015-09-17 Erlaunis

我不認爲利用delay()最適合在這裏使用。你只需使用setTimeout即可。遵守以下...

[...] 

$('#chocobo').html('<div id="banana" class="fa fa-check"></div>&nbspDone'); 

setTimeout(function() { 
    $('#chocobo').html('<div id="banana" class="fa fa-refresh"></div>&nbspDownload'); 
}, 1000); 

[...]

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

參見delay()文檔例如用途和情形

JSFiddle Link -

來源

2015-09-17 23:50:00 scniro

謝謝，它的作品！我曾嘗試過這種方法，但沒有奏效，我可能犯了一個錯誤。但現在沒關係，再次感謝:) – Erlaunis

jQuery的延遲功能可用於改變添加到隊列，如動畫的步驟簡化演示。你可以嘗試使用setTimeout來取得你要找的效果：

setTimeout(function(){ 
    $('#chocobo').html('<div id="banana" class="fa fa-refresh"></div>&nbsp; Download'); 
}, 1000); // 1000 being 1s in ms

編輯：哎呀！我太慢了。反正Erlaunis也有更好的答案。

來源

2015-09-17 23:52:59

但是，你可以用它在這條路上，有回調函數fadeIn()，如果你不希望使用的setTimeout（）：

http://jsfiddle.net/ufsxaxm3/1/

$("#chocobo").html('<div id="banana" class="fa fa-check"></div>&nbspDone').fadeIn('slow', function() { 
$('#chocobo').html('<div id="banana" class="fa fa-refresh"></div>&nbspDownload').delay(1000).fadeIn(1000); 
    });;

所以，你需要一些jQuery的效果/動畫，然後延遲（）將工作，如你所願...

來源

2015-09-18 00:00:01 sinisake

不錯的可能性，我傾向於這是有點矯枉過正，並傾向於一個更精簡的方法。無論發現什麼 – scniro

謝謝，是的...只是一種可能性...原生js setTimeout（）可能更快，更優雅......但我喜歡使用jQuery提供的功能（如果庫已經被使用）... :) – sinisake

用jquery添加一個延遲

回答

相關問題