Question

jQuery可以用作sleep（）或wait（）函数吗？等待后暂停执行语句。我尝试了$（）。延迟（5000），但没有5秒等待。 delay（）仅用于效果吗？

我不是在寻找涉及setTimeout延迟执行另一个函数或CPU占用解决方案的解决方案。我想要一个sleep（）函数，可以在不同的脚本中重用。

增加：

我不是故意建议一个根本不使用setTimeout的解决方案。我已经看到了需要在需要延迟之后将所有代码移动到其自己的函数中以便setTimeout可以调用它的解决方案。我不希望这样。一个自包含的包装函数，用于使用setTimeout或在虚拟非视觉效果中使用jQuery delay（），仅用于模拟睡眠函数。

Answer 1

你将失去运气。任何sleep()函数都很可能需要使用setTimeout（或可能setInterval）。事实上，delay()本身使用setTimeout。来自jQuery 1.4.2源代码：

delay: function( time, type ) {
    time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
    type = type || "fx";

    return this.queue( type, function() {
        var elem = this;
        setTimeout(function() {
            jQuery.dequeue( elem, type );
        }, time );
    });
},

.delay()仅适用于效果使用的队列（fx队列）。可以使用.queue()

使用自定义队列

Answer 2

这对我很有用：

http://benalman.com/projects/jquery-dotimeout-plugin/

$.doTimeout(3000,function(){
    alert('yahoooooo!');
});

示例：

http://benalman.com/code/projects/jquery-dotimeout/examples/delay-poll/

Answer 3

Javascript（以及扩展名，jQuery）没有真正的“睡眠”功能。您可以或多或少地滥用setTimeout＆amp; setInterval（以及它们的衍生物，比如延迟）来模拟睡眠，但你通常最好只适应setInterval / Timeout的做事方式......弄清楚你想做什么，把它封在一个函数中，传递它作为这两者之一的论据。

修改

好的，我看到了你的编辑。你真的想要一个传统的睡眠功能。以下是绝对滥用，而不是我推荐的内容。但是，如果我必须构建一个来挽救我的生命，我就是这样做的：测试大量循环周期需要多长时间，进行统计上显着数量的测试，平均结果，并使用该信息来定义一个函数，它将给定的毫秒大致转换为多个循环周期，然后运行。

在JavaScript中：

function timeloop(cycles) { 
    var start = new Date().getTime(); 
    for(var j=0; j<cycles; j++); 
    var end = new Date().getTime(); 
    return end-start; 
}


var sleep = (function () {
    var ms_tally = 0, i, s = 100, L = 10000;

    for(i=0; i<s; i++) 
        ms_tally += timeloop(L);
    var avg = ms_tally / i;
    var ms_per_cycle = avg / L;
    var cycles_per_ms = 1 / ms_per_cycle;

    return eval('function (ms) { for(var k=0, z=ms*'+cycles_per_ms+'; k<z; k++); }');
})()

但是，我不相信我的生命，健康，甚至20美元的时间准确性。如果你需要任何精度超过半秒的精确度，那么在JavaScript中执行此操作的正确方法是信任构建在您正在使用的任何环境中的工具......并且在浏览器中，这是setInterval和setTimeout。

编辑＃2：

我在其中一条评论中看到Ben Alman's doTimeout plugin的建议。在仔细研究之后，值得注意的是，这比我上面几乎所有方面产生的憎恶都要好。它不是完全我们经常使用的舒适sleep - y语法，你仍然需要以某种边缘方式考虑函数中的代码，但至少你可以仍然保持顺序的感觉。如果您无法直接使用setTimeout / Interval，请使用doTimeout或类似的东西。

Answer 4

如果您不想咀嚼CPU时间，则必须以某种方式使用setTimeout或类似内容。

以下是一个例子：

function myfn() {
    // make it so that `myvar` is in scope and can 
    // be shared by both `fn1` and `fn2`
    var myvar

    function fn1() {
        alert('foo')
        // set `bar` in the above `myfn`'s scope (without `var`)
        myvar = 'bar'
        // sleep for 1.2 seconds
        setTimeout(fn2, 1200)
    }

    function fn2() {
        alert(myvar)
    }
    fn1()
}
myfn()

Answer 5

根据你的问题 如何使用jQuery的delay（）作为sleep（）？，并回答这个问题：

我尝试了$（）。延迟（5000），但没有5秒等待。是延迟（）仅用于效果？

你是否已经尝试过使用delay（）的jQuery.queue（）？例如。

＆＃13;

$.fn.extend({
    changeBgColor: function(color) {
        return this.each(function() {
          $(this).css("background-color", color);
        });
    }
});
$.fn.wait = function(mls, callback) {   
    return this.delay(mls).queue(function () {
      $("span").text($(this).queue().length);    
      callback();    
      $(this).dequeue();
    });    
};

$(document).ready(function(){
    $("#start").click(function(){
        var div = $("div");        

        div.delay(1000).queue(function () {
            $("span").text(div.queue().length);
            div.css("background-color", "red").text("red");
            $(this).dequeue();
        }).delay(1000).queue(function (next) {
            $("span").text(div.queue().length); 
            div.changeBgColor("green").text("green");
            next();
        });

        div.wait(1000,function () {       
            div.changeBgColor("yellow").text("yellow"); 
        }).wait(1000,function () {       
            div.changeBgColor("blue").text("blue");      
        });
    });
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<p><button id="start">Start</button>&nbsp;<span></span></p>

<div style="display:inline-block;background:blue;height:100px;width:100px;"></div>
<div style="display:inline-block;background:blue;height:100px;width:100px;"></div>
</body>
</html>

＆＃13;

queue（）方法允许您创建一个函数队列在所选元素上执行。 dequeue（）方法在中执行它们顺序。

如何使用jQuery的delay（）作为sleep（）？

5 个答案: