Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >使用setTimeout模拟setInterval

使用setTimeout模拟setInterval

作者头像
kifuan
发布于 2022-10-24 08:55:59
发布于 2022-10-24 08:55:59
1.8K00
代码可运行
举报
文章被收录于专栏:随便写写-kifuan随便写写-kifuan
运行总次数:0
代码可运行

源码

前往Github获取本文源码。

介绍

相信setInterval这个东西大火都比较熟了,这里不做关于它的介绍,而是关于本文是如何实现这一功能。

我们通过一个Set来保存定时器的id,当清除时,就把这个id删掉;当每一次调用时,都会检查一下当前id是否存储于这个Set中。

实现

如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const interval = {
    _active: new Set(),
    _id: 0,

    set(callback, delay) {
        const id = this._id++
        this._active.add(id)

        const handler = () => {
            if (!this._active.has(id)) {
                return
            }
            setTimeout(() => {
                callback()
                handler()
            }, delay)
        }
        handler()
        return id
    },

    clear(id) {
        this._active.delete(id)
    }
}

我们用_active这个属性来保存上文提到过的id,其它的就没什么要说的了。

测试

用下面的代码测试它的正确性:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let count = 0
const id = interval.set(() => {
    count++
    console.log(`count is ${count}`)
    if (count === 5) {
        interval.clear(id)
    }
}, 500)

一般定时器都是自己把自己clear掉,这里也不例外,这种需求应该还挺多的。

这篇文章写着玩的,实际用途没啥用,只是说明了setInterval可以基于setTimeout来实现。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
为什么要用 setTimeout 模拟 setInterval ?
来源:九旬 https://segmentfault.com/a/1190000038829248
@超人
2021/02/26
1.2K0
为什么要用 setTimeout 模拟 setInterval ?
为什么要用 setTimeout 模拟 setInterval ?
在[JS 事件循环之宏任务和微任务](../Performance/JS事件循环之宏任务和微任务.html)中讲到过,setInterval 是一个宏任务。
九旬
2021/01/06
1.2K0
JavaScript基础-定时器:setTimeout, setInterval
在JavaScript的世界里,定时器是实现异步编程不可或缺的工具,它允许我们按计划执行某些代码片段。setTimeout和setInterval作为两大核心定时器函数,广泛应用于页面动画、定时更新、延时操作等多种场景。本文将深入浅出地介绍这两个函数的基本用法、常见问题、易错点及避免策略,并通过代码示例加以说明。
Jimaks
2024/06/14
4990
JavaScript基础-定时器:setTimeout, setInterval
深度解密setTimeout和setInterval——为setInterval正名!
重复定时器,JS有一个方法叫做setInterval专门为此而生,但是大家diss他的理由很多,比如跳帧,比如容易内存泄漏,是个没人爱的孩子。而且setTimeout完全可以通过自身迭代实现重复定时的效果,因此setIntervval更加无人问津,而且对他退避三舍,感觉用setInterval就很low。But!setInverval真的不如setTimeout吗?请大家跟着笔者一起来一步步探索吧!
小美娜娜
2019/04/04
4K0
深度解密setTimeout和setInterval——为setInterval正名!
早读《Making setInterval Declarative with React Hooks》
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
icepy
2019/12/18
6540
【Hooks】:setInterval 与 React Hooks
Our “impedance mismatch” is between the React programming model and the imperative setInterval API.
WEBJ2EE
2021/02/26
1.1K0
【Hooks】:setInterval 与 React Hooks
nodejs之setTimeout源码解析
从上面的代码可知,active一个定时器实际上是把新建的timeout对象挂载到一个哈希队列里。我们看一下这时候的内存视图。
theanarkh
2019/03/15
1.5K0
nodejs之setTimeout源码解析
定时器setTimeout和setInterval的简单应用
本文简单利用定时器setTimeout和setInterval举了两个小栗子:定时炸弹和1-100递增
全栈程序员站长
2022/11/09
6060
通过 React Hooks 声明式地使用 setInterval
本文就来探索一下,如何让 setInterval 和 Hooks 和谐地玩耍,为什么是这种方式,以及这种方式给你带来了什么新能力。
小芭乐
2019/02/20
7.6K3
通过 React Hooks 声明式地使用 setInterval
你可能不知道的setInterval的坑
之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么。今天去摸索了下之后,决定来做个记录以免自己忘记,也希望让更多人了解到这个坑。
嘿嘿嘿
2018/10/09
2K0
哪些 js 手写题是需要掌握的
普通的递归思路很容易理解,就是通过循环递归的方式,一项一项地去遍历,如果每一项还是一个数组,那么就继续往下遍历,利用递归程序的方法,来实现数组的每一项的连接:
helloworld1024
2022/10/10
1.8K0
前端js手写题经常忘,记录一下
使用时间戳的节流函数会在第一次触发事件时立即执行,以后每过 wait 秒之后才执行一次,并且最后一次触发事件不会被执行
helloworld1024
2022/09/23
1K0
2023前端二面手写面试题总结_2023-02-23
题目描述:JS 实现一个带并发限制的异步调度器 Scheduler,保证同时运行的任务最多有两个
用户10358576
2023/02/23
6010
nodejs 14.0.0源码分析之setTimeout
这一篇我们来看看nodejs是如何实现定时器的。14.0.0的nodejs对定时器模块进行了重构,之前版本的实现是用一个map,以超时时间为键,每个键对应一个队列。即有同样超时时间的节点在同一个队列。每个队列对应一个底层的一个节点(二叉堆里的节点),nodejs在时间循环的timer阶段会从二叉堆里找出超时的节点,然后执行回答,回调里会遍历队列,哪个节点超时了。14.0.0重构后,只使用了一个二叉堆的节点。我们看一下他的实现。 我们先看下定时器模块的组织结构。
theanarkh
2020/02/25
8280
nodejs 14.0.0源码分析之setTimeout
# JavaScript 专题之 This 和定时器
思维导图:https://naotu.baidu.com/file/7d05ddb397c649f62136040993cbd04bopen in new window
九旬
2023/10/18
1720
# JavaScript 专题之 This 和定时器
JavaScript定时器:setTimeout与setInterval 定时器与异步循环数组
深入了解一下 关于JavaScript定时器的知识; setTimeout与setInterval简述 setTimeout与setInterval使用方法基本相同,他们接受两个参数,第一个参数是需要执行的函数,第二个参数是执行的延迟时间,看栗子: setTimeout(function(){ alert("hello"); //第一个参数为函数 你可以传入函数名 或一个匿名函数 },3000);     //第二个参数为延迟时间 标识多少毫秒之后执行前一个函数 setInt
前朝楚水
2018/04/03
2.2K0
setTimeout实现原理和使用注意
浏览器渲染进程中所有运行在主线程上的任务都需要先添加到消息队列,然后事件循环系统再按照顺序执行消息队列中的任务。
winty
2019/12/20
1.7K0
nodejs之setImmediate源码分析
从上面的代码中我们知道,调用setImmediate函数后,nodejs会把回调和参数存在一个队列里。等待回调。然后处理队列里的每个节点。下面我们看一下处理函数的代码。
theanarkh
2019/03/19
9420
react Hook初探
文章的代码来自https://www.cnblogs.com/qcloud1001/p/10408634.html。
theanarkh
2019/04/24
6340
92.精读《React PowerPlug 源码》
React PowerPlug 是利用 render props 进行更好状态管理的工具库。
黄子毅
2022/03/14
1.2K0
相关推荐
为什么要用 setTimeout 模拟 setInterval ?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档