用setTimeout实现setInterval

作者: Wendy曹 | 来源:发表于2017-09-01 20:13 被阅读611次
    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){
            t = 0;
            throw e.toString();
          }
        }
      }
      setTimeout(interval, millisec)
    }
    

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

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

    相关文章

      网友评论

      • yoker_yi:玩可以这样玩,但实际项目中没必要:smile::smile:
        Wendy曹:@yoker_yi 嗯嗯,那是,其实是面试题

      本文标题:用setTimeout实现setInterval

      本文链接:https://www.haomeiwen.com/subject/kpikjxtx.html