标签:function 触发 防抖 节流 0.5 JS flag
防抖: 连续事件不触发, 停了0.5s才触发
记忆: 如果没有防抖,输入一个字发送一次请求, 浏览器会卡顿抖, 所以叫防抖
let t=null
ipt.oninput = function(){
if(t !== null)
clrTimeOut(t) //在0.5s以内的都清掉了
t = setTimeOut(function fn(){} , 500) //只有最后一次达到0.5s,才执行一次fn()
}
节流: 连续事件每隔0.5s触发一次
let flag = true
ipt.oninput = function(){
if(flag)
setTimeOut(function fn(){ flag=true } , 500) //只有最后一次达到0.5s,才执行一次fn()
flag = false
}
区别:
比如有一个连续触发10s的事件, 防抖只触发第10s的事件, 节流在10s内每0.5s触发一次事件
节流使用:
import throttle from 'lodash/throttle';//节流 throttle节流阀
import debounce from 'lodash/debounce';//防抖 bounce反弹 debounce防止反弹
methods: {
changeIndex: throttle(function (index) {
this.currentIndex = index;
}, 20),
...
getFullName: debounce(function() {
console.log('my fullname is chentingjun')
}, 500),
标签:function,触发,防抖,节流,0.5,JS,flag 来源: https://www.cnblogs.com/boji/p/15929608.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。