如何用setTimeout实现setInterval、clearInterval

面试的时候被问到这个题,然后没能解答出来,回去想了想,想出来了一种方案。

一、首先来看看怎么实现setInterval 的:

var mySetInterval= function(fn, time) {
// 定义一个递归函数,持续调用定时器
  var execute = function(fn, time) {
     setTimeout(function(){
        fn();
        execute(fn, time);
     }, time)
   }
  execute(fn, time);
}

我们来调用一下:

var set1 = mySetInterval(function() {
   console.log(1);
}, 3000)

控制台


image.png

二、那么如果我们如何实现clearInterval 呢?

首先,我们先来研究一下setTimeout :


image.png

setTimeout 返回的竟然是一串整数,并且这些整数都不重复,还是连续的,没错,这个就是clearTimeout 工作的时候,会找到对应的id的定时器,然后清除掉,好了,知道了这个,那么我们能不能把当前定义的mySetInterval 的id存储下来呢?

var timeWorker = {}
var mySetInterval= function(fn, time) {
// 定义一个key,来标识此定时器
var key = Symbol();
// 定义一个递归函数,持续调用定时器
  var execute = function(fn, time) {
     timeWorker[key] = setTimeout(function(){
        fn();
        execute(fn, time);
     }, time)
   }
  execute(fn, time);
  // 返回key
  return key;
}
var myClearInterval = function(key) {
  if (key in timeWorker) {
   clearTimeout(timeWorker[key]);
    delete timeWorker[key];
  }
}

来看一下执行结果:


image.png

成功!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言:在引用开发中,我们经常需要在页面中执行一些周期性的操作,比如每隔一段时间就执行某一固定的操作。而对于这样的操...
    帅帅哒小白阅读 5,370评论 1 3
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,349评论 0 5
  • JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInt...
    晚晴幽草阅读 1,678评论 1 18
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,814评论 0 8
  • 2017-03-12 常远托福 微信公众号:changyuantoefl 一个人漂洋过海去美帝求学,从此所有的事情...
    常远老师阅读 239评论 0 0