js如何实现函数防抖与节流
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js如何实现函数防抖与节流,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2503字,纯文字阅读大概需要4分钟。
内容图文
概念理解防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
相关推荐:《javascript高级教程》
js函数防抖与节流的区别:
函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。
个人踩坑
1、通过理解函数防抖与函数节流的概念后,使用闭包实现函数防抖和节流,没有考虑到对于节流,如果用户在下一次请求之前已输入完毕,但是此时不会再进行请求,则会导致最后输入的文字获取其他事件改变不发请求,即漏请求,所以需要加一个setTimeout兜底函数,且在每次准备请求的时候,设一个flag,即是否已经发送请求,如果走了正常周期发送请求,改为true,否则即为false,走setTimout,让setTimeout比剩余事件略长一些,优先走节流定时器请求;
2、如果使用箭头函数,则不需要保存this。
代码实现
<div> <div> <input type="text" id="unDebounce"> </div> <div> <input type="text" id="debounce"> </div> <div> <input type="text" id="throttle"> </div> </div>
// 函数防抖节流 var elem1 = document.getElementById("unDebounce") var elem2 = document.getElementById("debounce") var elem3 = document.getElementById("throttle") // 不防抖 function ajax1(value){ console.log("不防抖,不节流") console.log(value) } elem1.addEventListener('keyup',function (e) { ajax1(e.target.value); }) // 防抖 function ajax2(value) { console.log(value) } function debounce(func,delay){ console.log("函数防抖") let timer = null; return function(...args){ if(timer){ console.log("清除定时器") clearTimeout(timer) } timer = setTimeout(()=>{ console.log("重新计时") func.call(this,...args) },delay) } } let debounceFn = debounce(ajax2,1000) elem2.addEventListener('keyup',function (e) { debounceFn(e.target.value); }) // // 节流 function ajax3(value){ console.log(value) } function throttle(func,delay){ console.log("函数节流") let lastTime = 0; let timer = null; return function (...args) { let flag = false ; // 还没发送数据 let now = +new Date().getTime(); if(timer){ clearTimeout(timer) } if(now-lastTime>=delay){ console.log("当前时间大于设定时间,开始执行函数") func.apply(this,args) console.log("time1",new Date().getTime()) lastTime = now; flag = true; // 发送了数据 }else{ timer = setTimeout(()=>{ if(!flag){ // 如果没有发送数据成功,再走这个,兜底发送请求 func.apply(this,args) console.log("time2",new Date().getTime()) } },delay-(now-lastTime)+1000) // setTimeout多一些,优先执行周期性请求 } } } let throttleFn = throttle(ajax3,5000) elem3.addEventListener('keyup',function (e) { throttleFn(e.target.value); })
以上就是js如何实现函数防抖与节流的详细内容。
内容总结
以上是互联网集市为您收集整理的js如何实现函数防抖与节流全部内容,希望文章能够帮你解决js如何实现函数防抖与节流所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。