jQuery中的wait（）或sleep（）函数？

Posted 2023-05-08

【中文标题】jQuery中的wait（）或sleep（）函数？

【英文标题】：wait() or sleep() function in jquery?

【发布时间】：2011-08-09 00:44:02

【问题描述】：

我要添加一个类，等待 2 秒再添加一个类。

.addClass("load").wait(2sec).addClass("done");

有什么办法吗？

【参考方案1】：

setTimeout 将在延迟一段时间（以毫秒为单位）后执行一些代码。但是，重要的一点：由于 javascript 的性质，其余代码在设置计时器后继续运行：

$('#someid').addClass("load");

setTimeout(function()
  $('#someid').addClass("done");
, 2000);

// Any code here will execute immediately after the 'load' class is added to the element.

【讨论】：

目前这是一个糟糕的解决方案，因为它失去了让 jquery 控制动画的优势，比如 .stop()。更好的解决方案是 .delay()

@user123blahblah ...这是问题的 PROPER 解决方案（与动画无关）。 .delay 在动画队列之外做杰克豆。无论谁支持你的错误评论，都是误导自己。

【参考方案2】：

那就是.delay()。

http://api.jquery.com/delay/

如果你正在做 AJAX 的东西，你真的不应该只是自动写“完成”，你应该真正等待响应，看看它是否真的完成了。

【讨论】：

还有 Steven 你想.removeClass('load') 否则你添加两个类加载和完成，这可能是不希望的。如果您确实在等待异步操作完成，最好的办法是在完成并成功时执行 .addClass，如果不是 .addClass('error') 可能是一个想法

jQUery "delay()" 函数没有提供任何类似通用"wait" 功能的东西。它是动画系统的一部分，仅适用于动画队列。该函数总是立即返回，并继续执行而不会暂停。

【参考方案3】：

delay() 不会完成这项工作。 delay() 的问题在于它是动画系统的一部分，并且只适用于动画队列。

如果您想在执行动画之外的操作之前等待怎么办？

使用这个：

window.setTimeout(function()
                 // do whatever you want to do     
                  , 600);

会发生什么？：在这种情况下，它会等待 600 毫秒，然后再执行花括号中指定的代码。

这对我有很大帮助，一旦我弄清楚了，希望它也能帮助你！

重要通知：“window.setTimeout”是异步发生的。编写代码时请记住这一点！

【参考方案4】：

意识到这是一个老问题，但我写了一个插件来解决这个问题，有人可能会觉得有用。

https://github.com/madbook/jquery.wait

让你这样做：

$('#myElement').addClass('load').wait(2000).addClass('done');

【参考方案5】：

有一个功能，但它是额外的： http://docs.jquery.com/Cookbook/wait

这个小sn-p让你等待：

$.fn.wait = function(time, type) 
    time = time || 1000;
    type = type || "fx";
    return this.queue(type, function() 
        var self = this;
        setTimeout(function() 
            $(self).dequeue();
        , time);
    );
;

【参考方案6】：

您可以使用.delay() 函数。 这就是你所追求的：

.addClass("load").delay(2000).addClass("done");

【参考方案7】：

我在网上找到了一个叫睡眠功能的功能，不知道是谁做的。在这里。

function sleep(milliseconds) 
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) 
    if ((new Date().getTime() - start) > milliseconds)
      break;
    
  


sleep(2000);

【参考方案8】：

xml4jQuery 插件提供 sleep(ms,callback) 方法。剩余的链将在休眠期后执行。

$(".toFill").html("Click here")
                .$on('click')
                .html('Loading...')
                .sleep(1000)
                .html( 'done')
                .toggleClass('clickable')
                .prepend('Still clickable <hr/>');

.toFillborder: dashed 2px palegreen; border-radius: 1em; display: inline-block;padding: 1em;
        .clickable cursor: pointer; border-color: blue;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdn.xml4jquery.com/ajax/libs/xml4jquery/1.1.2/xml4jquery.js"></script>
        <div class="toFill clickable"></div>

【参考方案9】：

我想我有一些可以帮助你的东西，那就是使用 deferred。与 $.when 一起使用，它会暂停直到任务完成，然后继续：它搜索 Deferred 元素。 您还可以一个接一个地链接事件，等待前一个事件完成以继续下一个事件。

$.when( $('#element').addClass('load'), $('#element').addClass('done') ).then(function(x)  console.info('Already done') );