排队html函数

时间:2012-12-25 14:34:49

标签: jquery

我想将div的内容更改3次,每次更改之间延迟1秒。 delay()在此代码中不起作用:

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

我直接吃'卷饼'。完成这项工作的最短途径是什么?

4 个答案:

答案 0 :(得分:2)

使用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() - 函数,因为它只对标准效果队列产生影响,例如。动画。

答案 1 :(得分: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/

答案 2 :(得分:0)

使用:

setTimeout(function(){},1000)

答案 3 :(得分:0)

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