JavaScript简单实现节流和防抖

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

一.节流

定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

原理：节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。 
实现：实现节流方式有两种，一种是时间戳，另一种是定时器 

//节流函数
function throttle2(fn, delay) {
	let preTime = Date.now()

	return function() {
	    const context = this
	    let args = arguments
	    let nowTime = Date.now()
	    if (nowTime - preTime >= delay) {
	        fn.apply(context, args)
	        preTime = Date.now()
	    }
	}
}

//处理函数
function handle(){
	console.log(document.body.scrollTop || document.documentElement.scrollTop)
}

//滚动事件
document.addEventListener("scroll",throttle2(handle,500))

// 节流throttle代码（定时器）：
function throttle(func, delay) {            
    var timer = null;    
    
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {  
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}   
//处理函数
function handle() {            
    console.log(document.body.scrollTop || document.documentElement.scrollTop);        
}  
//滚动事件
document.addEventListener('scroll', throttle(handle, 1000));

使用场景：

可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。

二.防抖

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

// 防抖
function debounce(fn, wait) {   
	//用来记录当前执行函数的状态
    var timeout = null;  
   
    return function() {        
        if(timeout !== null) {
        	//清除正在执行的函数
    		clearTimeout(timeout);	
        }
        timeout = setTimeout(fn, wait);    
    }
}

// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
document.addEventListener('scroll', debounce(handle, 500));

当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。

1. debounce函数封装后，返回内部函数
2. 每一次事件被触发，都会清除当前的timer然后重新设置超时并调用。这会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发 
3. 只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行

使用场景：

• 输入框（搜索，用户名，密码等），只有等用户输入完毕时，才去检查格式是否正确，用防抖来节约请求资源。https://github.com/jinyajuan/study/blob/master/new_file4.html
• window触发resize，不断的调整浏览器窗口大小，用防抖来让其只触发一次（监听滚动条位置，就可以将防抖函数应用其中）。