在 jquery 中执行 wait()或 sleep()函数？

小开

有一个函数，但它是额外的: 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);
});
};

小开

那就是 .delay()。

Http://api.jquery.com/delay/

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

小开

最佳答案

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.

小开

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

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

让你这样做:

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

小开

延迟()不会做这项工作。延迟()的问题在于它是动画系统的一部分，并且只应用于动画队列。

如果在执行动画之外的内容之前需要等待，该怎么办？

用这个:

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

What happens?: In this scenario it waits 600 miliseconds before executing the code specified within the curly braces.

这对我很有帮助，一旦我弄明白了，希望它也能帮助你！

IMPORTANT NOTICE: 'window.setTimeout' happens asynchronously. Keep that in mind when writing your code!

小开

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

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

小开

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>

小开

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

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


sleep(2000);

小开

我认为我有一些东西可以帮助你，这是与延期的工作。与 $一起使用时，它会暂停直到任务完成，然后继续: 它搜索 Deferred 元素。您还可以将事件一个接一个地连接起来，等待前一个事件完成后继续下一个事件。

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