setTimeout函数的理解和防抖的实现

setTimeout函数，是延时函数

setTimeout()方法的返回值是一个唯一的数值，这个数值有什么用呢: 如果你想要终止setTimeout()方法的执行，那就必须使用 clearTimeout()方法来终止，而使用这个方法的时候，系统必须知道你到底要终止的是哪一个setTimeout()方法(因为你可能同时调用了好几个 setTimeout()方法)，这样clearTimeout()方法就需要一个参数，这个参数就是setTimeout()方法的返回值(数值)，用这个数值来唯一确定结束哪一个setTimeout()方法。

setTimeout函数在防抖中的应用

函数防抖（debounce）：

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

function debounce(func,wait){
	var TimeOut = null;
    console.log('test');
	return function(){
		if(TimeOut != null) clearTimeout(TimeOut);
		TimeOut = setTimeout(func,wait);
	}
}
function handle(){
	console.log(Math.random())
}
document.getElementById("btnClick").addEventListener("click",debounce(handle,1000))

理解一下上面的函数：

（1）刚一进来这个函数，debounce就已经开始执行，进行到var TimeOut = null;然后用return函数将下面的操作赋给“click",接下来每次点击唤醒click,那么执行的就是return后面的内容，

（2）第一次timeOut为null,执行第一个setTimeout,给TimeOut一个标记值，接下来在delay时间内，下一次click又来了，此时TimeOut不为null，（是上一次setTimeout的标记值），那么则清除这个计时器，然后进行第二次的TimeOut = setTimeout(func,wait);下一次又来了，此时TimeOut不为null，（是上一次setTimeout的标记值）

（3）如果超过了delay时间，下一次点击没有来，则这个计时器不会被清除，开始执行handle的函数内容