如何在javascript中添加延迟

我想在

6

秒后添加

red

类。我尝试使用setTimeout，但没有工作。你能建议更好的方法吗

我想写一个延迟函数，在继续/执行下一个代码之前延迟一段时间。

你需要承诺

function abc(elm){
    this.$elm =  document.querySelector(elm)
}

abc.prototype.addClass =  function (str){
  this.$elm.classList.add(str)
    return this
}

abc.prototype.removeClass =  function (str){
   this.$elm.classList.remove(str)
    return this
}

abc.prototype.delay =  function (timer){
   let self = this
  
  setTimeout(()=>{
    return self
  },timer)
    return this
}

function $(str){
  return new abc(str);
}

let x = $('#test').delay(5000).delay(1000).addClass('red');

console.log($('#test'));

请查找下面的示例

功能abc（elm）{
此.$elm=document.querySelector（elm）
}
abc.prototype.addClass=函数（str）{
此.$elm.classList.add（str）
还这个
}
abc.prototype.removeClass=函数（str）{
此.elm.classList.remove（str）
还这个
}
abc.prototype.delay=功能（计时器）{
返回新承诺（（解决）=>{
让self=这个
设置超时（（）=>{
返回解析（self）
}，计时器）
})
}
函数$（str）{
返回新的abc（str）；
}
异步函数hello（）{
设x=$（'body'）
等待x.延迟（5000）；
x、 addClass（“红色”）；
}

文件
瑞德先生{
背景：红色；
}
点击这里。。。

您不能以这种方式延迟执行

您最初的delay函数确实创建了一个超时回调，但它也会立即（在超时发生之前）返回自身

例如：

$（'#test'）。延迟（5000）。延迟（1000）。添加类（'red'）

发生以下情况：

致电
$
对#1的结果调用
delay
对#2的结果调用
delay
对#3的结果调用
addClass
#3中设置的超时执行，没有人关心返回的结果
#2中设置的超时执行，没有人关心返回的结果
为了得到您想要的结果，您可以简单地累积所需的延迟，并将其应用于操作点，如下所示：


功能abc（elm）{
这个.elm=document.querySelector（elm）；
这是.\u delayTimeout=0；
这个._delayExec=（cb）=>{
setTimeout（cb，this.\u delayTimeout）；
}
}
abc.prototype.addClass=函数（str）{
这个._delayExec（（）=>{
此.$elm.classList.add（str）
});
归还这个；
}
abc.prototype.removeClass=函数（str）{
这个._delayExec（（）=>{
此.elm.classList.remove（str）
});
归还这个；
}
abc.prototype.delay=功能（计时器）{
这是._delayTimeout+=计时器；
console.log（this.\u delayTimeout）；
归还这个；
}
函数$（str）{
返回新的abc（str）；
}
设x=$（'#test'）.delay（1000）.addClass（'red'）.delay（2000）.removeClass（'red'）.addClass（'green'）；
console.log（$（'#test'））
.red{
颜色：红色；
}
格林先生{
背景颜色：绿色；
}
测试
你就是不能通过同步的方式做到这一点。那将阻止这场战争
整个应用程序的时间

最好的方法是使用异步和回调

abc.prototype.delay = function (timer) {
    return new Promise((resolve) => {
        let self = this
        setTimeout(() => {
            return resolve(self)
        }, timer)
        return resolve(this);
    })

}
let x = $('#test').delay(5000);

您可以根据承诺创建一个非常简单的任务队列来执行。由于承诺执行已经使用了一个任务队列，所以您只需要遵守一个承诺，并且每当您得到一个新的东西要添加时，您都可以通过
.then（）
链接它，并遵守最新的承诺。这样，如果您添加三个任务
T1
->
T2
->
T3
，它们将按照添加顺序进行解析。如果您添加的任务只是在它们之间添加了一个简单的延迟，如
T1
->等待6秒->
T2
->等待5秒->
T3
，则该任务也会运行，以腾出执行空间

这是一个示例实现，用于说明利用（不带参数的函数）作为任务延迟和稍后执行的思想


功能abc（elm）{
此.$elm=document.querySelector（elm）
this.queue=Promise.resolve（）；
}
/**
*为以后执行添加任务的统一方法
*@param{Function}task-稍后执行的thunk
*@param{number}[delay=0]上一个任务完成后在上执行此操作之前等待的时间（毫秒）
*/
abc.prototype.addTask=函数（任务，延迟=0）{
const waitFor=（）=>newpromise（res=>setTimeout（res，delay））；
this.queue=this.queue
.然后（等待）
.然后（任务）
}
abc.prototype.addClass=函数（str）{
this.addTask（（）=>this.elm.classList.add（str））；
还这个
}
abc.prototype.removeClass=函数（str）{
this.addTask（（）=>this.elm.classList.remove（str））；
还这个
}
abc.prototype.delay=功能（计时器）{
//添加一个空函数作为任务。如果需要，还可以执行日志记录或其他内部逻辑
this.addTask（（）=>{}，计时器）；
还这个
}
函数$（str）{
返回新的abc（str）；
}
//用法
设x=$（'#test'）.delay（5000）.delay（1000）.addClass（'red'）；
x、 延迟（1000）
.延迟（1000）
.延迟（1000）
.延迟（1000）
.延迟（1000）//5秒
.removeClass（“红色”）
.red{
背景色：红色；
颜色：白色；
}

培根ipsum dolor amet汉堡包t骨猪肉，熏牛肉沙朗猪腌牛肉里脊法兰克福尾球尖肉丸猪肚排骨火腿。Bresaola火鸡水牛下颚t形骨比尔顿博格多根奶牛卡皮科拉肉丸pastrami boudin alcatra。Bresaola鸡肉培根牛，法兰克福肉丸汉堡干。香克利卡皮科拉鸡leberkas火鸡。球头培根馅饼干。意大利腊肠皮卡纳鸡肉培根，turducken水牛chislic andouille porchetta舌头香肠火腿t形骨。安多维尔牛猪排恶魔岛，turducken ribeye牛腰肉尾boudin条状牛排doner。
您是否正在尝试重新实现jQuery？若然，原因为何？通读能解决你的问题吗？这能回答你的问题吗？@我不想使用asyn wait
。promise我可以使用promise我可以使用promise很好使用，但是OP不能像在他们的示例代码中那样直接链接另一个
延迟
/
addClass
。在这种情况下，
$（'#test'）。延迟（1000）。addClass（'red'）。延迟（5000）。removeClass（'red'）。addClass（'red'））
预期输出为
添加cl
abc.prototype.delay = function (timer, callback){
    let self = this;
    setTimeout(() => {
        callback(self);
    }, timer);
}
$('#test').delay(5000, function(element) {
    $(element).delay(5000, function(element) {
        console.log("Here we are!");
    });
});