divの内容を3回変更したいのですが、各変更の間に1秒の遅延があります。
delay()
このコードでは機能しません:
$('#import-status-msg').html('Importing content ..').delay(1000).
html('Organizing content ..').delay(1000).
html('Eating burrito ..');
「ブリトーを食べる」を直接もらいます。これを行うための最短の方法は何ですか?
divの内容を3回変更したいのですが、各変更の間に1秒の遅延があります。
delay()
このコードでは機能しません:
$('#import-status-msg').html('Importing content ..').delay(1000).
html('Organizing content ..').delay(1000).
html('Eating burrito ..');
「ブリトーを食べる」を直接もらいます。これを行うための最短の方法は何ですか?
setTimeout-functionの使用:
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のdelay()関数は、標準のエフェクトキューにのみ影響するため、使用できません。アニメーション。
queue
jqueryの関数を使用したより一般的な解決策:
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 ..')
]);
使用する:
setTimeout(function(){},1000)
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);