哈尔滨快速建站专业定制,南昌建设公司网站,长沙公司网站的建设,安徽义信建设网站1、什么是防抖和节流防抖#xff08;debounce#xff09;#xff1a;每次触发定时器后#xff0c;取消上一个定时器#xff0c;然后重新触发定时器。防抖一般用于用户未知行为的优化#xff0c;比如搜索框输入弹窗提示#xff0c;因为用户接下来要输入的内容都是未知的debounce每次触发定时器后取消上一个定时器然后重新触发定时器。防抖一般用于用户未知行为的优化比如搜索框输入弹窗提示因为用户接下来要输入的内容都是未知的所以每次用户输入就弹窗是没有意义的需要等到用户输入完毕后再进行弹窗提示。节流throttle每次触发定时器后直到这个定时器结束之前无法再次触发。一般用于可预知的用户行为的优化比如为scroll事件的回调函数添加定时器。2、使用场景防抖在连续的事件只需触发一次回调的场景有1.搜索框搜索输入。只需用户最后一次输入完再发送请求2.手机号、邮箱验证输入检测3.窗口大小resize。只需窗口调整完成后计算窗口大小。防止重复渲染。节流在间隔一段时间执行一次回调的场景有1.滚动加载加载更多或滚到底部监听2.搜索框搜索联想功能3、手写防抖函数1、函数初版1.接收什么参数参数1 回调函数参数2 延迟时间function mydebounce(fn, delay){}2.返回什么最终返回结果是要绑定对应的 监听事件所以一定是个新函数function mydebounce(fun, delay) { const _debounce () { } return _debounce}3.内部怎么实现可以在 _debounce 函数中开启一个定时器定时器的延迟时间就是 参数delay每次开启定时器时都需要将上一次的定时器取消掉function mydebounce(fn, delay){// 1. 创建一个变量记录上一次定时器let timer null// 2. 触发事件时执行函数const _debounce () {// 2.1 取消上一次的定时器第一次执行时timer应该为nullif(timer) clearTimeout(timer)// 2.2 延迟执行传入fn的回调timer setTimeout(() {fn()// 2.3 函数执行完成后需要将timer重置timer null},delay)}return _debounce
}以上一个基本的防抖函数就实现了对其进行测试!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput typetextscript src./防抖.js/scriptscriptconst inputDOM document.querySelector(input)let counter 1;function searchChange(){console.log(第${counter}次请求,this.value,this);}inputDOM.oninput mydebounce(searchChange,500)/script
/body
/html在上面的测试中当我们持续在input框中输入数据时控制台只会每隔500ms进行输出2、优化虽然上面实现了基本的防抖函数但是我们会发现代码中this的指向是window而window没有value值所以无法知道事件的调用者A. 优化thisfunction mydebounce(fn, delay){let timer null// 1. 箭头函数不绑定this修改为普通函数const _debounce function(){if(timer) clearTimeout(timer)timer setTimeout(() {// 2. 使用显示绑定apply方法fn.apply(this)timer null},delay)}return _debounce
}B.优化参数在事件监听的函数是有可能传入一些参数的例如 event等function mydebounce(fn, delay){let timer null// 1. 接收可能传入的参数const _debounce function(...args){if(timer) clearTimeout(timer)timer setTimeout(() {// 2. 将参数传给fnfn.apply(this,args)timer null},delay)}return _debounce
}测试 scriptconst inputDOM document.querySelector(input)let counter 1;function searchChange(event){console.log(第${counter}次请求,this.value, event);}inputDOM.oninput mydebounce(searchChange,500)/scriptC.优化增加取消操作为什么要增加取消操作呢例如用户在表单输入的过程中返回了上一层页面或关闭了页面就意味着这次延迟的网络请求没必要继续发生了所以可以增加一个可取消发送请求的功能function mydebounce(fn, delay){let timer nullconst _debounce function(...args){if(timer) clearTimeout(timer)timer setTimeout(() {fn.apply(this,args)timer null},delay)}// 给_debounce添加一个取消函数_debounce.cancel function(){if(timer) clearTimeout(timer)}return _debounce
}测试bodyinput typetextbutton取消/buttonscript src./防抖.js/scriptscriptconst inputDOM document.querySelector(input)const btn document.querySelector(button)let counter 1;function searchChange(event){console.log(第${counter}次请求,this.value, event);}const debounceFn mydebounce(searchChange,500)inputDOM.oninput debounceFnbtn.onclick function(){debounceFn.cancel()}/script
/bodyD.优化增加立即执行有些场景需要第一次输入时立即执行后续的输入再使用防抖// 1.设置第三个参数控制是否需要首次立即执行
function mydebounce(fn, delay, immediate false){let timer null// 2. 定义变量用于记录状态let isInvoke falseconst _debounce function(...args){if(timer) clearTimeout(timer)// 3.第一次执行不需要延迟if(!isInvoke immediate){fn.apply(this,args)isInvoke truereturn}timer setTimeout(() {fn.apply(this,args)timer null// 4.重置isInvokeisInvoke false},delay)}_debounce.cancel function(){if(timer) clearTimeout(timer)// 取消也需要重置timer nullisInvoke false}return _debounce
}测试bodyinput typetextbutton取消/buttonscript src./防抖.js/scriptscriptconst inputDOM document.querySelector(input)const btn document.querySelector(button)let counter 1;function searchChange(){console.log(第${counter}次请求,this.value);}const debounceFn mydebounce(searchChange,1000,true)inputDOM.oninput debounceFnbtn.onclick function(){debounceFn.cancel()}/script
/body总结基本函数function mydebounce(fn, delay){let timer nullconst _debounce function(...args){if(timer) clearTimeout(timer)timer setTimeout(() {fn.apply(this,args)timer null},delay)}return _debounce
}考虑取消和立即执行的应用场景function mydebounce(fn, delay, immediate false){let timer nulllet isInvoke falseconst _debounce function(...args){if(timer) clearTimeout(timer)if(!isInvoke immediate){fn.apply(this,args)isInvoke truereturn}timer setTimeout(() {fn.apply(this,args)timer nullisInvoke false},delay)}_debounce.cancel function(){if(timer) clearTimeout(timer)timer nullisInvoke false}return _debounce
}3、手写节流函数函数初版需要接受参数参数1要执行的回调函数参数2要执行的间隔时间function myThrottle(fn, interval){ }返回值返回值为一个新的函数function myThrottle(fn, interval){ const _throttle function(){ } return _throttle}内部实现如果要实现节流函数利用定时器不太方便管理可以用时间戳获取当前时间nowTime参数 开始时间 StartTime 和 等待时间waitTime间隔时间 intervalwaitTIme interval - nowTime - startTime得到等待时间waitTime对其进行判断如果小于等于0则可以执行回调函数fn开始时间可以初始化为0第一次执行时waitTime一定是负值因为nowTime很大所以第一次执行节流函数一定会立即执行function myThrottle(fn, interval){// 1. 定义变量保存开始时间let startTime 0const _throttle function(){// 2. 获取当前时间const nowTime new Date().getTime()// 3. 计算需要等待的时间const waitTime interval - (nowTime - startTime)// 4.当等待时间小于等于0执行回调if(waitTime 0){fn()// 并让开始时间 重新赋值为 当前时间startTime nowTime}}return _throttle
}测试bodyinput typetextscript src./节流.js/scriptscriptconst input1 document.querySelector(input)let counter 1;function searchChange(){console.log(第${counter}次请求,this.value);}input1.oninput myThrottle(searchChange,500)/script
/body2.优化同样的首先是对this指向和参数的优化A.优化this指向和参数function myThrottle(fn, interval){let startTime 0const _throttle function(...args){const nowTime new Date().getTime()const waitTime interval - (nowTime - startTime)if(waitTime 0){fn.apply(this,args)startTime nowTime}}return _throttle
}B.优化控制立即执行上面的代码中第一次执行 肯定是 立即执行的因为waitTime第一次必为负数但有时需要控制 第一次不要立即执行// 1. 设置第三个参数控制是否立即执行
function myThrottle(fn, interval, immediate true){let startTime 0const _throttle function(...args){const nowTime new Date().getTime()// 2. 控制是否立即执行if(!immediate startTime 0){startTime nowTime}const waitTime interval - (nowTime - startTime)if(waitTime 0){fn.apply(this,args)startTime nowTime}}return _throttle
}测试 scriptconst input1 document.querySelector(input)let counter 1;function searchChange(){console.log(第${counter}次请求,this.value);}input1.oninput myThrottle(searchChange,1000,false)/script总结基本函数function myThrottle(fn, interval){let startTime 0const _throttle function(...args){const nowTime new Date().getTime()const waitTime interval - (nowTime - startTime)if(waitTime 0){fn.apply(this,args)startTime nowTime}}return _throttle
}考虑是否立即执行function myThrottle(fn, interval, immediate true){let startTime 0const _throttle function(...args){const nowTime new Date().getTime()if(!immediate startTime 0){startTime nowTime}const waitTime interval - (nowTime - startTime)if(waitTime 0){fn.apply(this,args)startTime nowTime}}return _throttle
}参考https://blog.csdn.net/m0_71485750/article/details/125581466
