函数节流和防抖
+ 两种处理 重复高频触发 事件的方式节流
+ 在 单位时间 内只能 触发一次 => 开关思想
防 抖
+ 在 单位时间 内, 如果重复出现同样的事件, 那么把前一次干掉
<input type="text"> <script> const inp = document.querySelector('input') inp.oninput = function () { console.log(`我要搜索的内容是: ${ this.value }`) } </script>
重复高频触发事件 : 额外浪费浏览器性能 ( 触发了 11 次 事件 )
函数节流
+ 在固定范围内只执行一次事件 + 用在一个异步的时候, 并且两个异步的事情不可以同时触发 + 在一个固定时间段内, 多次触发事件的时候, 只执行第一次
<input type="text"> <script> const inp = document.querySelector('input') // 1. 函数节流 // 准备节流开关 ( 节流阀 ) // 开关为 true 的时候, 表示可以执行 // 开关为 false 的时候, 表示不可以执行 let flag = true inp.oninput = function() { // 这个事件内的代码是否执行, 取决于 节流开关 if (!flag) return // 代码能执行到这里, 说明开关是开着的 flag = false console.log(`我要搜索的内容是: ${ this.value }`, new Date().getTime()) // 设置单位时间以后, 讲开关打开 setTimeout(() => flag = true, 500) } </script>
函数节流之后只 触发了 4 次 事件 , 节约了浏览器 7 次 的操作性能 ( 7次 请求 , 7次 渲染页面 )
函数防抖 ( 应用较多 )
瀑布流 或者 下拉加载 等等...都经常会使用
+ 在固定时间内 , 只触发事件一次 + 每一次触发事件的时候 , 都会从新计时开始 + 例子: 我规定 500ms 你不输入内容 , 那么就触发事件 => 第一次输入内容 h , 延迟 500ms 以后在触发 => 当我在 260ms 的时候, 输入了内容 e => 那么 h 内容的事件就不触发了 => 而是从输入 e 开始延时 500ms 触发事件
<input type="text"> <script> const inp = document.querySelector('input') // 2. 函数防抖 // 准备一个变量接收定时器返回值 let timer = null inp.oninput = function() { // 每一次执行这个事件的时候, 都关闭一次定时器 clearInterval(timer)// 每次触发事件的都把定时器清除 // 把本来应该立即执行的事情, 延后执行 timer = setTimeout(() => {// 给 timer 开关赋值 console.log(`我要搜索的内容是: ${ this.value }`) }, 500) } </script>
函数防抖之后只 触发了 1 次 事件 , 节约了浏览器 10 次 的操作性能 ( 10次 请求 , 10次 渲染页面 )
淘宝 : 节省了浏览器的性能( 运用了函数防抖 )