脚本宝典收集整理的这篇文章主要介绍了浅谈JavaScript节流与防抖,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
背景:当我们频繁去请求资源、接口等其他的时候,就会造成操作Dom频繁,接口压力大等等,性能下降。比如我有时候会每次搜索会猛地敲回车,在网络不很好的时候,点击下一页按钮的时候也会一直点,可能网络不好也可能服务器性能低。
为了避免频繁触发同一事件或请求,这时候就要用到节流和防抖了。
what?这是啥?当我第一次听到这两个名字的时候,心想是指节省流量、防止手抖吗。百思不得其解,赶紧就去学习。
简单来说:节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数,来降低压力,提高性能。
节流:在一定的时间内只会请求一次。
可以理解为:公交车,每个人是一次点击请求,每十分钟开一趟车,发送请求
防抖:触发事件后n秒后才能执行函数,如果在n秒内触发了事件,则会重新计算执行时间。
比如在一段时间内,我一直点击按钮,以最后一次点击为准发送一次请求。
解决思路 :
使用时间戳(发生在一段时间的开始),就是在计算
当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳 ,就执行一次函数
缺点:第一次直接触发 最后一次一段时间内无法触发
给一个场景,当我们搜索数据的时候,发起请求,没有做处理是这样的,请求肯定太过于频繁
代码:
<body> <div> <span>节流处理</span><input id="input" tyPE="text"> <button id="BTn">请求</button> </div> </body> <script> VAR btn = document.getElementById("btn") btn.addEventListener("click", throTTLe(output, 1000)) //添加点击事件监听 function output(e) { console.LOG(this, e) console.log(document.getElementById("input").value) //模拟发起一次请求 } //节流函数 function throttle(fn, delay) { // fn为执行的函数,delay为延迟时间 var last = 0; //上一次结束的时间 return function () { var cur = Date.now() console.log(cur-last) if (cur - last > delay) { fn.apply(this, arguments) //执行函数 last = cur //更新上一次时间 } } } </script>
效果:
解决思路 :
定时器(发生在定时结束)。缺点:第一次不触发 最后一次延迟触发
就是设置一个定时器,如果一直点击则清除定时器,最后一次开启定时器
代码:
<body> <div> <span>防抖处理</span><input id="input" type="text"> <button id="btn">请求</button> </div> </body> <script> var btn = document.getElementById("btn") btn.addEventListener("click", debounce(output, 1000)) //添加点击事件监听 function output(e) { console.log(this, e) console.log(document.getElementById("input").value) //模拟发起一次请求 } function debounce(fn, delay) { // fn为执行的函数,delay为延迟时间 var time = null; //定时器 return function () { clearTimeout(time); //清除定时器 let context = this; //获取当前button上下文 如果不指定,箭头函数就会一直往外找到window let args = arguments; time = setTimeout(() => { fn.apply(context, args); }, delay); } } </script>
效果:
第一次触发和最后一次延迟触发
代码:
function throttle(fn, delay) { // fn为执行的函数,delay为延迟时间 let time = null let flag=true //标识是不是第一次触发 return function () { clearTimeout(time) if (flag) { fn.apply(this, arguments) flag=false } time = setTimeout(() => { //触发定时器 fn.apply(this, arguments) flag=true }, delay) } }
效果:
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
背景:当我们频繁去请求资源、接口等其他的时候,就会造成操作Dom频繁,接口压力大等等,性能下降。比如我有时候会每次搜索会猛地敲回车,在网络不很好的时候,点击下一页按钮的时候也会一直点,可能网络不好也可能服务器性能低。
为了避免频繁触发同一事件或请求,这时候就要用到节流和防抖了。
what?这是啥?当我第一次听到这两个名字的时候,心想是指节省流量、防止手抖吗。百思不得其解,赶紧就去学习。
简单来说:节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数,来降低压力,提高性能。
节流:在一定的时间内只会请求一次。
可以理解为:公交车,每个人是一次点击请求,每十分钟开一趟车,发送请求
防抖:触发事件后n秒后才能执行函数,如果在n秒内触发了事件,则会重新计算执行时间。
比如在一段时间内,我一直点击按钮,以最后一次点击为准发送一次请求。
解决思路 :
使用时间戳(发生在一段时间的开始),就是在计算
当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳 ,就执行一次函数
缺点:第一次直接触发 最后一次一段时间内无法触发
给一个场景,当我们搜索数据的时候,发起请求,没有做处理是这样的,请求肯定太过于频繁
代码:
<body> <div> <span>节流处理</span><input id="input" type="text"> <button id="btn">请求</button> </div> </body> <script> var btn = document.getElementById("btn") btn.addEventListener("click", throttle(output, 1000)) //添加点击事件监听 function output(e) { console.log(this, e) console.log(document.getElementById("input").value) //模拟发起一次请求 } //节流函数 function throttle(fn, delay) { // fn为执行的函数,delay为延迟时间 var last = 0; //上一次结束的时间 return function () { var cur = Date.now() console.log(cur-last) if (cur - last > delay) { fn.apply(this, arguments) //执行函数 last = cur //更新上一次时间 } } } </script>
效果:
解决思路 :
定时器(发生在定时结束)。缺点:第一次不触发 最后一次延迟触发
就是设置一个定时器,如果一直点击则清除定时器,最后一次开启定时器
代码:
<body> <div> <span>防抖处理</span><input id="input" type="text"> <button id="btn">请求</button> </div> </body> <script> var btn = document.getElementById("btn") btn.addEventListener("click", debounce(output, 1000)) //添加点击事件监听 function output(e) { console.log(this, e) console.log(document.getElementById("input").value) //模拟发起一次请求 } function debounce(fn, delay) { // fn为执行的函数,delay为延迟时间 var time = null; //定时器 return function () { clearTimeout(time); //清除定时器 let context = this; //获取当前button上下文 如果不指定,箭头函数就会一直往外找到window let args = arguments; time = setTimeout(() => { fn.apply(context, args); }, delay); } } </script>
效果:
第一次触发和最后一次延迟触发
代码:
function throttle(fn, delay) { // fn为执行的函数,delay为延迟时间 let time = null let flag=true //标识是不是第一次触发 return function () { clearTimeout(time) if (flag) { fn.apply(this, arguments) flag=false } time = setTimeout(() => { //触发定时器 fn.apply(this, arguments) flag=true }, delay) } }
效果:
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
@H_126_324@ @H_777_325@您可能感兴趣的文章:以上是脚本宝典为你收集整理的浅谈JavaScript节流与防抖全部内容,希望文章能够帮你解决浅谈JavaScript节流与防抖所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。