个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 20:56:36 25 4
gpt4 key购买 nike

假设 $ 不是浏览器。现在必须实现$，它将接受一个字符串，这是一个查询，它将使用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>

最佳答案

我尝试使用队列和任务运行器来解决这个问题。谁能检查一下这看起来是否不错或者我们可以改进它吗？

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>

关于javascript - 在Javascript中实现类似jquery的函数addClass、removeClass和delay，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61468901/

25 4 0
文章推荐： javascript - 为什么 Node 的 process.stdin.on ('readable' ) 会触发我的回调一次？
文章推荐： docker - 多个Docker-Compose项目共享服务
文章推荐： scala - 从数据框中选择和处理数据的最有效方法
文章推荐： javascript - 如何将变量名称附加到 .getSheetByName()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com