JavaScript如何实现函数防抖与节流

防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。节流:规定在一个单位时间内,只能触发一次函数。如果

防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

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如何实现函数防抖与节流的详细内容,更多请关注网站的其它相关文章!

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

 


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6003.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注