延时问题的链式调用

最新推荐文章于 2022-01-16 19:46:17 发布

runzhi_z

最新推荐文章于 2022-01-16 19:46:17 发布

阅读量296

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/womuz/article/details/108340544

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了在软件开发中遇到的延迟加载技术，如何通过链式调用来优化性能，以及它们在实际应用中的关键作用。介绍了延迟加载的概念，即只在需要时才加载资源，减少了初始化时的内存占用。同时详细阐述了链式调用的优势，如代码简洁、可读性强，并举例说明如何在JavaScript中实现延迟加载和链式调用的结合，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

function Queue(){
    
}

实现队列Queue的两个方法：

add(timeout, callback) -- 给队列中添加方法

start() -- 执行队列中的方法，执行完之后队列清空 

实现链式调用

例如：

var que = new Queue()
que.add(1000, function(){
    console.log("1")
}).add(2000, function(){
    console.log("2")
}).add(1000, function(){
    console.log("3")
}).start()
// 输出1 2 3 时间间隔为1s 2s 1s

解法：

利用while循环来延时

Queue.prototype.add = function(time, func){
    this.arr.push((function(){
        let now = Date.now()
        while(Date.time - now <= time){}
        func()
    }))
    return this
}
Queue.prototype.start = function(){
    // 遍历数组，一次执行
    this.arr.map((ele) => {
        ele()
    })
    this.arr = []
    return this
}

借助promise的链式调用

class Queue {
    constructor() {
        this.queue = []
    }
    add(timeout, callback) {
        this.queue.push({
            timeout,
            callback
        })
        return this
    }
    // promise方法
    start() {
        // Promise 链式调用
        var promise = new Promise((resolve)=>{
            resolve()
        })
        for(let i=0;i<this.queue.length;i++){ // 注意作用域内 存在异步任务变量的let
            let {timeout, callback} = this.queue[i]
            promise = promise.then(()=>{
                return new Promise((resolve)=>{
                    setTimeout(()=>{
                        callback()
                        resolve()
                    }, timeout)
                })
            })
        }
        this.queue = null
    }
}

async/await

class Queue {
    constructor() {
        this.queue = []
    }
    add(timeout, callback) {
        this.queue.push({
            timeout,
            callback
        })
        return this
    }
    // async/await方法
    async start() {
        for(let i=0;i<this.queue.length;i++){
            let {timeout, callback} = this.queue[i]
            await new Promise((resolve)=>{
                setTimeout(()=>{
                    callback()
                    resolve()
                },timeout)
            })
        }
    }
}