防抖-节流-库

防抖函数和节流函数

认识防抖debounce函数

◼ 我们用一副图来理解一下它的过程：当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；当事件密集触发时，函数的触发会被频繁的推迟；只有等待了一段时间也没有事件触发，才会真正的执行响应函数；
防抖的应用场景很多：
➢输入框中频繁的输入内容，搜索或
者提交信息；
➢频繁的点击按钮，触发某个事件；
➢监听浏览器滚动事件，完成某些特
定操作；
➢用户缩放浏览器的resize事件；
可以使用underscore 库里面的防抖函数

案例:

    <input type="text"><!-- 使用 underscore 库--><script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>//1.获取inputElconst inputEl = document.querySelector("input")//监听input的输入// let counter = 1// inputEl.oninput=function(){//   console.log("发送网络请求",counter++,this.value)// }//防抖处理函数let counter = 1// 使用underscore 库里面的_.debounce防抖函数inputEl.oninput=_.debounce(function(){console.log("发送网络请求",counter++,this.value)},500)