美文网首页
关于setInteval和setTimeout

关于setInteval和setTimeout

作者: 月下吴刚_c8c7 | 来源:发表于2018-10-08 18:42 被阅读0次

HTML5标准规定
setTimeout的最短时间间隔是4毫秒;
setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒
用setTimeout模仿setInterval

var MyInterVal = function(fun,tm){
    console.log('this',this)
    if(this == window){
        return new MyInterVal(fun,tm);
    }
  this.Fun = null;
    this.clear = function(){
        clearTimeout(this.id);
    }
    this.setInterval = function(_fun,_tm){
    var self = this;
    if(this.Fun==null){
        if(typeof _fun=="string"){
            this.Fun = new Function(_fun);
        }else if(typeof _fun=='function'){
            this.Fun = _fun;
        }
      }
      this.id = setTimeout(function(){
          self.Fun();
          self.setInterval(self.Fun,_tm);
      },tm);
  }
  this.setInterval(fun,tm);
}

//使用

var s = MyInterVal(function(){
    console.log(1);
},1000);

清除

setTimeout(function(){
    s.clear();
},5000)

setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的事件。因此实际上,两次执行之间的间隔会小于指定的时间。比如,setInterval指定每100ms执行一次,每次执行需要5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。如果某次执行耗时特别长,比如需要105毫秒,那么它结束后,下一次执行就会立即开始,也就是无法保证两次执行间隔时间为固定时间.
为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。上面代码用setTimeout,可以改写如下。

var i = 1;
var timer = setTimeout(function() {
  alert(i++);
  timer = setTimeout(arguments.callee, 2000);
}, 2000);

上面代码可以确保两次执行的间隔是2000毫秒。

根据这种思路,可以自己部署一个函数,实现间隔时间确定的setInterval的效果。

function interval(func, wait){
  var interv = function(){
    func.call(null);
    setTimeout(interv, wait);
  };

  setTimeout(interv, wait);
}

interval(function(){
  console.log(2);
},1000);

上面代码部署了一个interval函数,用循环调用setTimeout模拟了setInterval。

对于setInterval得使用,个人建议是能不用尽量不用。涉及到必须要的定时器,前文已经叙述可以使用两个setTimeout嵌套组合来实现,并且还能规避掉一些问题得发生。涉及到要用它来制作动画( jQuery就使用setInterval来写动画,也是导致其慢原因之一),更建议使用requestAnimationFrame(RAF),或者直接采用CSS来写(如果可以的话)。

requestAnimationFrame比起setTimeout、setInterval的优势主要有两点:

  1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。
  2. 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量

相关文章

  • 关于setInteval和setTimeout

    HTML5标准规定setTimeout的最短时间间隔是4毫秒;setInterval的最短间隔时间是10毫秒,也就...

  • setTimeout 和setInterval

    setTimeout和setInterval的相同处 setTimeout和setInteval 都是window...

  • 2018-07-04

    1、setTimeout setInteval异同相同点:参数个数相同,都是两个,第一个参数为执行的js语句,第二...

  • 关于setTimeout和setInterval

    1、setTimeout定时器 setTimeout(code,millisec) setTimeout() 方法...

  • Window.setTimeout 常见用法

    关于 window.setTimeout() 语法: var timeoutID = setTimeout(fun...

  • setTimeout和setInterval的区别

    setTimeout()定义和用法 首先让我们看一看W3C上关于setTimeout方法的介绍 定义 setTim...

  • 关于setTimeout

    先看一段代码: 输出结果是什么? 这里涉及到一个概念,首先JS是单线程的,而在JS中有两种任务:1)同步任务:同步...

  • 关于setTimeout

    JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序. 浏...

  • setTimeout/setImmediate/process.

    setTimeout setTimeout(setTnterval和setTimeout区别为执行次数不同 ),将...

  • 初识eval()

    今天看到一个关于自执行函数和异步调用的问题 解释:首先了解setTimeOut。setTimeOut第一个参数只接...

网友评论

      本文标题:关于setInteval和setTimeout

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