在Javascript中实现类似jquery的函数addClass、removeClass和delay

假设$不是浏览器。现在必须实现$，它将接受一个字符串，这是一个查询，它将使用querySelector来选择元素。（参考资料：）

现在实现类似jquery的函数addClass和removeClass。（参考资料：）

现在实现类似jquery的延迟函数。（参考资料：） 在这里，我被卡住了，无法执行此案例的延迟

$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');

代码示例

函数$（选择器）{
let元素=document.querySelector（选择器）
Object.prototype.addClass=函数（类名）{
this.classList.add（className）
还这个
}
Object.prototype.removeClass=函数（类名）{
this.classList.remove（className）
还这个
}
Object.prototype.delay=函数（毫秒）{
//怎么办？
还这个
}
返回元素
}
$（'#test'）.removeClass（'blue'）.delay（2000）.delay（1000）.addClass（'red'）

蓝先生{
背景颜色：蓝色；
}
瑞德先生{
背景色：红色；
}
。这是因为当调用
setTimeout（callback，ms）
中的
callback
时，您希望执行一些进一步的逻辑

就像你的例子一样
.delay（2000）.delay（1000）.addClass（'red'）
我已尝试使用队列和任务运行器来实现此问题。有人能检查一下这是否看起来不错，或者我们能改进一下吗


函数$（选择器）{
let元素=document.querySelector（选择器）
element.queue=[]
element.active=false
返回元素
}
Element.prototype.next=函数（）{
if（this.queue.length）this.runTask（this.queue.shift（））
}
Element.prototype.runTask=函数（回调）{
this.active=true
回调（）。然后（（）=>{
this.active=false
这个。下一个（）
})
}
Element.prototype.register=函数（回调）{
如果（此.active）{
this.queue.push（回调）
}否则{
this.runTask（回调）
}
}
Element.prototype.addClass=函数（类名）{
那=这
让callBack=（）=>newpromise（resolve=>setTimeout（函数（）{
that.classList.add（className）
解决（）
}, 0))
此注册表（回调）
还这个
}
Element.prototype.removeClass=函数（类名）{
那=这
让callBack=（）=>newpromise（resolve=>setTimeout（函数（）{
that.classList.remove（className）
解决（）
}, 0))
此注册表（回调）
还这个
}
Element.prototype.delay=功能（毫秒）{
那=这
让callBack=（）=>newpromise（resolve=>setTimeout（函数（）{
解决（）
}，ms）
此注册表（回调）
还这个
}
$（“#测试”）
.removeClass（“红色”）。延迟（500）
.addClass（“蓝色”）.delay（500）。delay（500）。removeClass（“蓝色”）
.delay（500）.addClass（“红色”）.delay（500）.removeClass（“红色”）
.delay（500）。addClass（“蓝色”）。delay（500）。removeClass（“蓝色”）
.delay（500）。addClass（“红色”）。delay（500）。removeClass（“红色”）

蓝先生{
背景颜色：蓝色；
}
瑞德先生{
背景色：红色；
}
jQuery是用“香草JavaScript”编写的，源代码可以在GitHub上找到：您是否将其用于教育目的？或者不允许在项目中使用jquery？原因是什么？@JózefPodlecki我只是出于教育目的才使用这个。试图深入了解jquery的工作原理。如果您有可以工作的代码，并且希望查看该代码的各个方面，您可以查看的帮助中心，看看它是否在主题中。@HereticsMonkey，非常感谢您向我介绍一种新的代码检查方法。我不知道。谢谢。看起来很漂亮！我将提取
let callBack=（）=>new Promise（resolve=>setTimeout（function（）{
和以后的函数代码。比如
createQueueItem（（）=>{that.classList.remove（className）；}，timeout）
Hi，我刚刚使用队列和任务运行程序添加了一个答案。你能检查一下吗
$('#test').removeClass('blue').addClass('red');

$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');