用setTimeout实现setInterval

setTimeout.jpg

今天跟大家分享一道有趣的题目,大家对定时器函数应该都不陌生,但是在开始我们的问题之前,还是简单介绍下这两个方法。

一、定义和使用方法

定义:
setTimeout() :在指定的毫秒数后调用函数或计算表达式,只执行一次。
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
使用方法:

setTimeout(code,millisec)
setInterval(code,millisec[,"lang"])

其中第一个参数可以是一个包含javascript代码的字符串,也可以是一个函数
第二个参数是等待时间

e.g.
//不建议传递字符串
setTimeout(“alert(‘Hello world’)”, 1000);

//推荐的调用方式
setTimeout(function(){ 
  Alert(“Hello world!")
},1000)
二、用setTimeout实现setInterval

下面我们就一起来实现这个有趣的问题
思路是使用递归函数,不断地去执行setTimeout从而达到setInterval的效果,看代码

function mySetInterval(fn, millisec){
  function interval(){
    setTimeout(interval, millisec);
    fn();
  }
  setTimeout(interval, millisec)
}

这个mySetInterval函数有一个叫做interval的内部函数,它通过setTimeout来自动被调用,在interval中有一个闭包,调用了回调函数并通过setTimeout再次调用了interval

三、一个更好的实现

我们再增加一个额外的参数用来标明代码执行的次数

function mySetInterval(fn, millisec,count){
  function interval(){
    if(typeof count===‘undefined’||count-->0){
      setTimeout(interval, millisec);
      try{
        fn()
      }catch(e){
        count = 0;
        throw e.toString();
      }
    }
  }
  setTimeout(interval, millisec)
}

参考资料:
《Javascript高级程序设计》
利用setTimeout来实现setInterval

给我点赞的都是小可爱 ^_^

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInt...
    晚晴幽草阅读 5,601评论 1 18
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 5,268评论 0 5
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,906评论 0 4
  • 定时器 参考链接 setTimeout() 上面代码的输出结果就是1,3,2,因为setTimeout指定第二行语...
    Cause_XL阅读 3,222评论 0 0
  • 以貌取人,相对还是比较科学的。 性格写在唇边,幸福露在眼角。 理性感性寄于声线,真诚虚伪映在瞳仁。 站姿看出才华气...
    张董氏阅读 3,056评论 0 0

友情链接更多精彩内容