js节流和防抖的原理，区别，应用

（1）为什么要防抖？
高频的函数操作可能产生不好的影响
如：resize、scroll、mousedown、mousemove、keyup、keydown……
这种在一瞬间（短时间内）对浏览器或服务器造成了过多压力的交互就需要进行优化了，为了解决这个问题，一般有两种解决方案：
debounce 防抖
throttle 节流
（2）目的：降低一个函数的触发频率，以提高性能或避免资源浪费
（3）防抖的原理就是：你尽管触发事件，但是我一定在事件触发n秒无操作后才执行。

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

防抖

应用场景:

• 搜索框连续场景：防止连续发送请求，只发送最后一次输入
• 缩放场景：监控浏览器 resize （echarts 里的resize）

概念: 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
俗话：重复执行，只执行最后一次
实现原理： 每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
缺点： 如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟
简单实现：

function debounce(fn, delay) {
	let timeout = null; //定义一个定时器
	return function() {
		if (timeout !== null)
			clearTimeout(timeout); //清除这个定时器
		timeout = setTimeout(fn, delay);
	}
}
// 处理函数
function handle() {
	console.log(Math.random());
}
// // 滚动事件
window.addEventListener('scroll', debounce(handle, 200));

节流

应用场景:

• 按钮提交场景：防止多次提交按钮

概念: 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。。
俗话：规定的时间内只执行一次
实现原理： 每次触发事件时，如果当前有等待执行的延时函数，则直接return，函数节流主要有两种实现方法：时间戳和定时器。

== 使用时间戳 ==当触发事件的时候，我们去除当前的时间戳，然后减去之前的时间戳（最一开始值设为0），如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

function throttle (func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

== 使用定时器实现 ==
当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(fn,delay) {
   let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
 
function sayHi(e) {
    console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));

总结：
函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。