排隊html函數

Question

我想改變一個div的內容3次，每次更改之間延遲1秒。 delay()並不在此代碼的工作：

$('#import-status-msg').html('Importing content ..').delay(1000). 
html('Organizing content ..').delay(1000). 
html('Eating burrito ..'); 

我得到直接「吃捲餅」。完成這件事最簡單的方法是什麼？

Answer 1

一個更通用的解決方案，使用jQuery的queue功能：

var gen = function (str, delay) { 
    return function (n) { 
    $(this).html(str); 
    setTimeout(n, delay || 1000); 
    }; 
}; 

$('#import-status-msg').queue([ 
    gen('Importing content ..'), 
    gen('Organizing content ..'), 
    gen('Eating burrito ..') 
]); 

http://jsbin.com/oraler/1/

Answer 2

用途：

setTimeout(function(){},1000) 

Answer 3

使用的setTimeout功能：

setTimeout(function() { 
    $('#import-status-msg').html('Importing content ..'); 
    setTimeout(function() { 
     $('#import-status-msg').html('Organizing content ..'); 
     setTimeout(function() { 
      $('#import-status-msg').html('Eating burrito ..'); 
     }, 1000); 
    }, 1000); 
}, 1000); 

不能使用jQuery的延遲（） - 功能只對標準效果隊列如的效果。動畫。

Answer 4

var q = ['Importing content ..','Organizing content ..','Eating burrito ..']; 
$("#test").html(q[0]); 
var i = 1; 
var p = setInterval(function(){ 
    $("#test").html(q[i]); 
    i++; 
    if(i==q.length){ 
     clearInterval(p); 
    } 
},1000); 

fiddle