javascript 如何每 4 秒在 jquery 中添加和删除一个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10094756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add and remove a class in jquery every 4 seconds
提问by Kegan Quimby
for some reason, this isn't adding and removing a new class on elements with the class of post, every 4 seconds. jquery loads correctly, as does this. chrome shows no errors with the code.
出于某种原因，这不是每 4 秒在具有 post 类的元素上添加和删除一个新类。jquery 正确加载，就像这样。chrome 显示代码没有错误。
$(document).ready(function(){
$('.post').addClass('display').delay(4000).removeClass('display');
});
回答by Mark Coleman
Since you listed you want this to happen every 4 seconds you can simply use setInterval()
由于您列出了您希望每 4 秒发生一次，您可以简单地使用 setInterval()
var $post = $(".post");
setInterval(function(){
$post.toggleClass("display");
}, 4000);
Note, the selector is cached in $postto minimize the number of times the DOM needs queried on each interval.
注意，选择器被缓存，$post以尽量减少每个时间间隔需要查询 DOM 的次数。
回答by David says reinstate Monica
Assuming you want to toggle the class-name after four seconds:
假设您想在四秒后切换类名：
setTimeout(function(){
$('.post').toggleClass('display');
},4000);
For toggling everyfour seconds (although @Markalready posted a setIntervaloption while I was adding this to my post. ...I'm leaving it, but I acknowledge that Mark got it first):
每四秒切换一次（虽然@MarksetInterval在我将它添加到我的帖子时已经发布了一个选项。......我要离开它，但我承认 Mark 先得到它）：
setInterval(function(){
$('.post').toggleClass('display');
},4000);
References:
参考：
回答by Blazemonger
.delayonly works with other animations methods, not addClassor removeClass. Try this:
.delay仅适用于其他动画方法，不适用于addClass或removeClass。试试这个：
$('.post').addClass('display');
setTimeout(function(){ $('.post').removeClass('display'); },4000);
If you want it to continue adding and removing, you need to get more creative. You could use setIntervaland an 8000-ms delay, but that would delay the first addClassas well. Another approach is to use nested setTimeouts and a recursive function call (along with toggleClassto shorten the code):
如果您希望它继续添加和删除，您需要获得更多创意。您可以使用setInterval8000 毫秒的延迟，但这也会延迟第一个addClass。另一种方法是使用嵌套的 setTimeouts 和递归函数调用（以及toggleClass缩短代码）：
function addRemoveClass() {
var delay = 4000; // milliseconds
setTimeout(function() {
$('.post').toggleClass('display');
addRemoveClass();
}, delay);
};
addRemoveClass();
? ? http://jsfiddle.net/mblase75/jU8cj/
? ? http://jsfiddle.net/mblase75/jU8cj/
(Set it to 1000 ms and set .displayto be transparent, and voila-- you've just re-invented the blinktag.)
（将其设置为 1000 毫秒并设置.display为透明，瞧——您刚刚重新发明了blink标签。）
回答by fanfavorite
I think you want something more like:
我想你想要更像的东西：
$(document).ready(function(){
setInterval(addRemoveClass,4000);
});
function addRemoveClass() {
$('.post').toggleClass('display');
}
回答by zzzzBov
You can only use delayon queuedactions in jQuery. Fortunately, adding an item to a queue is relatively straightforward:
您只能在 jQuery 中使用delayon queued操作。幸运的是，向队列添加项目相对简单：
$(selector).delay(duration).queue(function (next) {
$(this).doStuff();
doOtherStuff();
next();
});
The parameter provided to the function is a function to tell the queue to continue, in case you want to perform an asynchronous action, such as using $.ajax.
提供给函数的参数是告诉队列继续的函数，以防您想执行异步操作，例如使用$.ajax.
To get a loop, simply re-queue the queued function:
要获得循环，只需将排队的函数重新排队即可：
jQuery(function ($) {
"use strict";
function toggleDisplayClass(next) {
$(this).toggleClass('display') //toggles the class
.delay(4000) //waits 4 seconds
.queue(toggleDisplayClass); //requeued
next(); //continues on the queue
}
$('.post').queue(toggleDisplayClass);
});
You can see this in action on my updated fiddle.
您可以在我更新的 fiddle上看到这一点。
回答by kba
.delay()only delays animations, not functions. You could use JavaScript's nativesetTimeoutmethod.
.delay()只延迟动画，不延迟功能。您可以使用 JavaScript 的本机setTimeout方法。
function toggleDisplay() {
$('.post').toggleClass("display");
setTimeout(function(){ toggleDisplay(); },'1000');
}
toggleDisplay();
回答by beno?t
Something like that :
类似的东西：
jQuery(document).ready(function($) { // ready
var refresh=function(){
$('.post').toggleClass('display'); //switch
}//end refresh
setInterval(refresh,4000);
});
