setTimeout与setInterval区别

setTimeout与setInterval区别

这两个都是原生js的定时方法，但执行次数不同。

• setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。简单得说就是几秒之后，你把我交给你得任务执行了。（执行一次）

  setTimeout(function(){ alert("Hello"); }, 3000);

• setInterval（）可按照指定的周期（以毫秒计）来调用函数或计算表达式，直到clearInterval（）方法被调用或窗口被关闭。简单来说就是每几秒执行一次，无限执行。

<script>
    var w, h;
    var canvas = document.querySelector('canvas');
    ~~function setSize() {
        window.onresize = arguments.callee;
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }();
    var canCon = canvas.getContext('2d');
    var x = randomNum(0,w);
    var y = 100;
    setInterval(function(){
        canCon.fillStyle = randomColor();
        canCon.arc(x,y++,20,0,2*Math.PI)
        canCon.fill();
    },1000/60);

    // 随机数
    function randomNum(min,max){
        return Math.floor(Math.random() * (max - min) + min);
    }
    // 随机颜色
    function randomColor(){
        var r,g,b,a;
        r = randomNum(0,255);
        g = randomNum(0,255);
        b = randomNum(0,255);
        a = Math.random();
        return `rgba(${r},${g},${b},${a})`;
    }
</script>

至此一个闪动的滚动条出现。

但是我发现setInterval越来越快的问题…….

经过仔细排查之后，我排除了我自己代码的问题，于是就开始查各种资料。最后才晓得这是setInterval()自身的问题。下面引用大佬的一段话来解释为什么使用setInterval会出现越来越快的问题。

“JavaScript是运行在单线程的环境中的，所以这就意味着定时器就成了要执行的计划！而不是必须要执行的铁律！ 为啥呢？ 当函数开始执行时在栈中创建出来一个栈帧，这个栈帧的执行是需要时间的，假设有3秒，在这三秒内，JavaScript的单线程特点就会确保在这3秒内全力的专一的去解决掉这个栈帧（函数）。所以在这个函数运行的时候定时器是没有能力终止他的运行的，因此当函数的运行时间大于间隔时间时，间隔时间1秒到了，但是程序还有2秒没有执行完，那你也给我老老实实的等着函数执行完！！！”

知道了问题的原因，那我们再来看一下怎么去解决这个问题。

使用setTimeout循环来解决setInterval越来越快的问题

var i=0;
    function show() {
        console.log(i);
        i++;
        if(i<5){
            setTimeout(show,1000);
        }
    }
    show();

解决重复点击，setInterval越来越快问题

在data中定义intervalId存储定时器，初始化intetvalId为null，当触发事件时，在方法内部先判断intervalId是否为null，是则开启interval，否则不做处理返回。

<button @click="openInterval">开始</button>
<button @click="closeInterVal">关闭</button>

data(){
	return {
		intervalId: null
	}
},
methods: {
	openInterval(){
		if(this.intervalId != null)   return;
		this.setintervalId = setInterval(() => {});
	}
	closeInterVal(){
		clearInterval(this.intervalId);
		this.intervalId = null;
	}
}

完成实例

https://nikita-chuyin.github.io/2020/03/09/canvas%E7%BB%98%E5%88%B6%E7%A2%B0%E6%92%9E%E7%90%83%E5%8A%A8%E7%94%BB/