settimeout你会用吗？

在我们日常写代码中，有很多场景会用到定时器，那么关于定时器，你真的会用吗？下面就笔者最近使用定时器频率较高，特地总结了一下定时器有哪些值得注意的地方：

1. 及时清除

不管在什么场景下用到定时器，一定要在后续及时清除掉，否则会带来意想不到的隐患。

以下代码为实现一个定时器，初始时的时间间隔是50ms，当数字到95时，时间间隔变为1s。所以在if语句中在即将去执行新的setinterval时，将当前无用的定时器进行清除。

window.timeInterval = setInterval(function(){
        var process = Number(document.getElementById('process_box').innerText);
        document.getElementById('process_box').innerText = process + 1;
        if(process == 95){
            clearInterval(window.timeInterval);
            loadingVideo();//loading状态下数字的变化
        }
    }, 50);

以上情况只是将定时器清除，但是还应该在清除之后，将保存定时器id的变量置为null。

window.timeInterval = setInterval(function(){
	console.log('2s后的输出')
	if(window.timeInterval){
		clearInterval(window.timeInterval);
		console.log(window.timeInterval); //是一个数字，不为空
		window.timeInterval = null;
		console.log(window.timeInterval); //null
	}
}, 2000);

以上可以看出，如果只是用clearInterval把定时器清除的话，那么定时器确实是被清除了，但是window.timeInterval仍然存储着赋值时的变量，后续如果用到对该变量的值得判断结果的话，就必须在clearInterval后把该变量置为null。

2. 定时器挂在哪儿（针对react）

• 在class组件中：使用this.timer_id

//设置定时器
this.timer_id = setTimeout(() => {
	console.log('1秒后')
}, 1000);

//清除定时器
clearTimeout(this.timer_id);
this.timer_id = null;

• 在函数组件中：定义变量

function App() {
	let timer_id = '';
  	useEffect(()=>{
  	//设置定时器
	    timer_id = setTimeout(()=>{
	      console.log('1秒后')
	    }, 1000)
	})
	const handleClick = () => {
		console.log('timer_id....', timer_id);
		//清除定时器
    	clearTimeout(timer_id);
    	timer_id = null;
	}
	return(
		<button onClick={handleClick}>清除定时器</button>
	)
}

• 全局状态下使用：window.timer_id
  比如在html文件中写一个加载中的状态，用setInterval来实现动态变化的数字，但是这个轮询需要在js文件中清除，就可以将定时器挂在window下。

3. 定时器的最小间隔

setTimeout()/setInterval() 的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致的。

setTimeout(() => {
	console.log('执行')
}, 0)

当定时器的时间间隔设置为0时，可能只是需要回调函数在同步语句执行完之后才执行，但是时间间隔有时设置为0和设置为4其实是一样的，因为会存在最小的时间间隔。

希望大家能持续关注哦，留一些个人信息方便大家找到我哦。知乎 github
附上个人公众号哦，希望大家前来骚扰（也会经常写一些随笔来记录生活，毕竟人生漫漫）