首先下载lodash插件:里面封装函数的防抖与节流的业务【闭包+延时器】
- 终端执行
npm i --save lodash
成功后可以在node_modules文件夹中找到lodash.js
如果你想在html中使用lodash,可以将lodash.js文件复制到指定路径下,就可以方便通过script标签引入了
<script src="./lodash.js"></script>
防抖:前面所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发只会执行一次。
比如防抖可以作用于用户在输入框中输入内容时,是边输入边发请求还是结束后才发请求。或者用户鼠标移到某个按钮上就发请求的情况,容易造成卡顿。如果设置为结束后再发请求则实现防抖。
以下实现防抖的例子:文本输入一秒后才执行
let input=document.querySelector("input")
//绑定事件 文本发生变化立即执行
input.oninput=_.debounce(function(){
console.log("ajax发请求");
},1000)
节流:在规定间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。可以参考短信验证码,我们总是遇到要一分钟后才可以再次点击,这就避免了用户不断发请求的情况。
以下实现节流的例子:计数器,一秒内只能加一
button.onclick=_.throttle(function(){
//节流:目前的回调函数是五秒执行一次
//假如这里有很多业务代码,就可以给浏览器充裕的时间去解析
//比如短信验证码
count++
span.innerHTML=count
console.log("执行啦");
},5000)
总结一下区别:
防抖:用户操作很频繁,但是只执行一次
节流:用户操作很频繁,但是会把频繁操作转换为少量操作,可以给浏览器充裕的时间解析代码