假设 $ 不是浏览器。现在要实现$，它会接受一个字符串，这是一个查询，它会使用querySelector来选择元素。（参考：https ://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector ）$('text')现在实现 jquery 之类的函数 addClass 和 removeClass。（参考：https ://developer.mozilla.org/en-US/docs/Web/API/Element/classList ）$('#test').removeClass('blue').addClass('red');现在实现 jquery 之类的函数延迟。（参考：https ://api.jquery.com/delay/ ）在这里我被卡住了，无法为这种情况实施延迟。$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');代码示例function $(selector) { let element = document.querySelector(selector) Object.prototype.addClass = function (className) { this.classList.add(className) return this } Object.prototype.removeClass = function (className) { this.classList.remove(className) return this } Object.prototype.delay = function(ms){ // what to do? return this } return element}$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');<!DOCTYPE html><html> <head> <style> .blue{ background-color: blue; } .red{ background-color: red; } </style> </head> <body> <div id="test" style="width: 200px; height: 200px;" class="blue"></div> </body></html>
3 回答
梦里花落0921
TA贡献1772条经验 获得超6个赞
我试图使用队列和任务运行器来解决这个问题。任何人都可以检查这是否看起来不错，或者我们可以改进它吗？
function $(selector) {
let element = document.querySelector(selector)
element.queue = []
element.active = false
return element
}
Element.prototype.next = function () {
if (this.queue.length) this.runTask(this.queue.shift())
}
Element.prototype.runTask = function (callBack) {
this.active = true
callBack().then(() => {
this.active = false
this.next()
})
}
Element.prototype.register = function(callBack){
if (this.active) {
this.queue.push(callBack)
} else {
this.runTask(callBack)
}
}
Element.prototype.addClass = function (className) {
that = this
let callBack = () => new Promise(resolve => setTimeout(function () {
that.classList.add(className)
resolve()
}, 0))
this.register(callBack)
return this
}
Element.prototype.removeClass = function (className) {
that = this
let callBack = () => new Promise(resolve => setTimeout(function () {
that.classList.remove(className)
resolve()
}, 0))
this.register(callBack)
return this
}
Element.prototype.delay = function (ms) {
that = this
let callBack = () => new Promise(resolve => setTimeout(function () {
resolve()
}, ms))
this.register(callBack)
return this
}
$('#test')
.removeClass("red").delay(500)
.addClass("blue").delay(500).delay(500).removeClass("blue")
.delay(500).addClass("red").delay(500).removeClass("red")
.delay(500).addClass("blue").delay(500).removeClass("blue")
.delay(500).addClass("red").delay(500).removeClass("red")
<!DOCTYPE html>
<html>
<head>
<style>
.blue{
background-color: blue;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="test" style="width: 150px; height: 150px; margin:10px;" class="red"></div>
</body>
</html>
皈依舞
TA贡献1851条经验 获得超3个赞
Object.prototype.delay实现起来并不容易，因为您必须引入某种队列，例如 jQuery 在内部使用。这是因为您希望callback在调用 in时执行一些进一步的逻辑setTimeout(callback, ms)。
如你的例子 .delay(2000).delay(1000).addClass('red');
白板的微信
TA贡献1883条经验 获得超3个赞
const $ = function(params){
let elems = document.querySelectorAll(params);
let dealyTime = 0
return {
addClass: function addClass(args){
setTimeout(() => {
elems.forEach((ele) => {
ele.classList.add(args);
dealyTime = 0
})
}, dealyTime)
return this;
},
delay: function delay(time){
dealyTime += time;
return this;
},
removeClass: function removeClass(args){
setTimeout(() => {
elems.forEach((ele) => {
ele.classList.remove(args);
dealyTime = 0
})
}, dealyTime)
return this;
}
}
}
添加回答
举报
0/150
提交
取消