SOURCE

function $(selector){
    return new Query(selector)
}

function Query(selector){
    this.elements = document.querySelectorAll(selector)
    this.task = []

    setTimeout(() => {
        this.next()
    },0)
}

Query.prototype.css = function (key,value) {
    this.task.push(() => {
        setTimeout(() => {
            for(let item of this.elements){
                item.style[key] = value
            }
            this.next()
        },0)
    })

    return this
}
Query.prototype.delay = function (wait){
    this.task.push(() => {
        setTimeout(() => {
            this.next()
        },wait)
    })

    return this
}
Query.prototype.hide = function (){
    this.task.push(() => {
        setTimeout(() => {
            for(let item of this.elements){
                item.style.display = 'none'
            }
            this.next()
        },0)
    })

    return this

}
Query.prototype.next = function (){
    let task = this.task.shift()

    task && task()
}
console.log('开始修改样式')
$('.li').delay(1000).css('color','red').delay(3000).hide()
console.log('修改成功')

<div class="li">11</div>
<div class="li">22</div>
<div class="li">33</div>
<div class="li">44</div>
<div class="li">55</div>