用promise封装定时函数setInterval

最新推荐文章于 2024-08-31 09:21:20 发布

原创最新推荐文章于 2024-08-31 09:21:20 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了一种使用JavaScript Promise和setInterval实现定时打印数字的方法。通过封装定时器函数，并利用Promise的状态转换，实现了1秒后从1打印到30，然后再次等待1秒后从31打印到60。此技术展示了Promise在异步任务中的灵活应用。

需求

1秒后打印数字1到30，完成打印后再过1秒打印数字31至60

代码

<script>
        function timer(callback,time)   //这里是封装的函数
        {
            return new Promise((resovle,reject)=>{
                let timerId = setInterval(()=>{
                    // 这里把生成的定时器id传给回调函数，参照前面博客的写法，这种写法需要熟练
                    callback(timerId,resovle);   
                },time);
            });
        }
        let p = timer((timerId,resolve)=>{
            console.log('第一个回调');
            for(let i = 1; i <= 30; i++)
            {
                console.log(i);
                if(i === 30)
                {
                    clearInterval(timerId);
                    resolve();   // 改变第一个promise对象的状态，这样下面就可以收到，进行then处理
                }
            }
        },1000);
        p.then(
            ()=>{
                timer((timerId,resolve)=>{
                    console.log('第二个回调');
                    for(let i = 31; i <= 60; i++)
                    {
                        console.log(i);
                        if(i === 60)
                        {
                            clearInterval(timerId);
                        }
                    }
                },1000);
            }
        );
     </script>