【JavaScript】第二十六天 （节流）（防抖）

函数节流和防抖

函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，输入框持续输入，将输入内容远程校验，多次触发点击事件、onScroll等等。

一、节流

什么是节流？

限制一个函数在一定时间内只能执行一次。

为什么节流？

前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

问题：

问题1：对浏览器本身的性能有很大的影响
问题2：如果是发送http请求，大量的http请求会浪费我们很多的宽带，也会给服务器本身造成很大的压力使用函数节流对代码进行优化

函数节流的两个关键点： 1、单位时间内 2、只触发一次

window.onscroll = throttle(function(){
    console.log(111);
}) 

function throttle(fn){
    let flag = true;
   return function() {
        if (flag) { 
            setTimeout(() => {
                fn()
                flag = true;
            }, 1000); 
        }
        flag = false;
    }
}
 只要走setTimeOut,说明执行了业务代码设置为true，1s后继续执行
 如果没走setTimeOut，说明没走业务代码，不执行

面向过程中主考官的问题点：

1、是否知道函数节流的概念
2、是否知道函数节流的具体使用场景
3、是否对项目本身性能有所关注

二、防抖

防抖：“你先抖动着，啥时候停了，我在继续执行下一步”
应用场景：一个搜索框，等输入停止了，再触发。

函数防抖，也就是当持续储蓄触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行

分解一下需求：

● 持续触发不执行
● 不触发的一段时间之后再执行

let oTxt = document.querySelector("#txt")
	oTxt.oninput = debounce(function(){
		console.log(oTxt.value);
	},1000)
	
	
	function debounce(fn,millsec){
		var timer = null;
		return ()=>{
			clearTimeout(timer);
			timer = setTimeout(function(){
				fn()
			},millsec)
		}
	}