jQuery中的wait()或sleep()函数是什么？

Question

我想添加一个类，等待2秒钟后再添加另一个类。

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

有没有什么方法？

- Steven Moss

Answer 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.

- Chris Cherry

---

这个方案目前很差，因为它失去了使用 jQuery 控制动画的优势，例如 .stop()。一个更好的解决方案是使用 .delay()。 - user151496

@user123blahblah...这才是这个问题的正确解决方案（与动画无关）。.delay在动画队列之外毫无作用。赞同你错误评论的人自己被误导了。 - IncredibleHat

Answer 2

这个函数是.delay()。

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

如果你正在进行AJAX相关操作，你不应该只自动写入"done"，而应该等待响应并确认它是否真的完成了。

- Oscar Godson

---

另外，Steven，你想要使用.removeClass('load')，否则你会添加两个类load和done，这可能是不希望的。如果你确实在等待异步操作完成，最好的方法是在它成功完成时使用.addClass，如果不成功，则可以考虑使用.addClass('error')。 - Gary Green

jQuery中的"delay()"函数并没有提供类似于通用的“等待”功能。它是动画系统的一部分，仅适用于动画队列。该函数总是立即返回，执行将继续进行而不会暂停。 - Pointy

Answer 3

delay()无法胜任此任务。delay()的问题在于它是动画系统的一部分，只适用于动画队列。

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

使用以下代码：

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

发生了什么？：在此场景中，它会等待600毫秒，然后执行花括号内指定的代码。

我一旦弄清楚了这个问题，就非常有帮助，希望它也能对你有所帮助！

重要通知：'window.setTimeout'是异步执行的。编写代码时请注意这一点！

- J. Louw

Answer 4

请注意，这是一个旧问题，但我编写了一个插件来解决此问题，可能会有人觉得有用。

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

可以让你做到这一点：

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

- madlee

Answer 5

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

这个小片段允许您等待：

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

- e382df99a7950919789725ceeec126

Answer 6

我在互联网上找到了一个名为“sleep”的函数，不知道是谁编写的。这里给出该函数的代码：

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

sleep(2000);

- desbest

Answer 7

你可以使用.delay()函数。
这就是你想要的：

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

- Maytha8

Answer 8

我认为我有一些可以帮助你的东西，那就是使用延迟对象（Deferred）。与$.when一起使用时，它会暂停直到任务完成，然后继续：它会搜索延迟对象元素。 你还可以链接事件，一个接一个地等待前一个完成后才能继续下一个。

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

- LeoBeltranV

Answer 9

xml4jQuery插件提供了sleep(ms，callback)方法。在睡眠期间，剩余的链将被执行。

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

.toFill{border: 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>

- Sasha Firsov