实用技能一：防抖与节流

防抖与节流

1. 用途

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。

举例来说，一个点击事件会发起一次请求，用户拼命去快速点击，就会发起许多次请求，这显然不合理，防抖节流就是限制这种行为。

注意：防抖是控制次数，节流是控制频率

2. 防抖（debounce）

防抖是无论触发多少次事件，只执行最后一次；

具体来说就是：规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间

案例：

点击.box元素，1s后输出123；在点击了之后，1s内再点多少次，都以最后一次点击为准重新开始出现计时1s，然后输出一次123

function debounce(fn,waitTime){let timeout =nullreturn function(){if(timeout!==null){clearTimeout(timeout)}timeout=setTimeout(fn,waitTime)}}
function cs(){console.log(123)
}
document.querySelector(".box").addEventListener("click",debounce(cs,1000))

3. 节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。通俗来说就是假如规定点击之后1s内发起一次请求，这1s内无论点多少次，无论请求有没有完成，都不会再发起请求

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

1) 时间戳版：

function throttle(fn,waitTime){let prev=Date.now()return function(){let now=Date.now()if(now - prev > waitTime){fn()prev=Date.now()}}}
function cs(){console.log(123)
}
document.querySelector(".box").addEventListener("click",throttle(cs,1000))
</script>

每次执行fn函数都会更新prev用来记录本次执行的时间，下一次事件触发时判断时间间隔是否到达预先的设定，重复上述操作。

2) 定时器版:

function throttle(fn,waitTime){let timeout=nullreturn function(){if(!timeout){fn()  //放在这可以先执行，不用等1stimeout=setTimeout(function(){//fn() 放这里是1s后执行timeout=null;},1000)}}
}
function cs(){console.log(123)}
document.querySelector(".box").addEventListener("click",throttle(cs,1000))

4. vue项目中遇到的案例

1）需求：点击一个div元素，发起请求，获取到数据，之后弹出弹窗，渲染弹窗
2）问题：如果不进行防抖节流，一直点击div元素，就会一直发起请求；如果使用定时器的方法来实现防抖节流，无法掌握请求响应时间与设置的时间之间的长短问题，长了用户觉得反应慢，短了又会发起请求
3）解决：

在data中设置一个变量status=true
开始执行函数就将变量重新赋值为false，接着执行请求函数，此时再触发点击事件，也不能满足条件发起请求函数
请求函数使用async和await，在发起请求，处理完数据之后，再将status重新赋值为true，这样点击事件又能执行请求函数
这样点击之后，弹窗没出来之前，只能触发一次请求函数，直到请求函数执行完毕，才能再次触发，时间刚刚接上，比定时器要灵活

//请求函数
async fn(){//发起请求let data=await axios(xxxxxx)//处理数据xxxxxx//将变量status=truethis.status=true
}
//点击函数
clickEvent(){//第一次是true，执行请求函数if(this.status){//一开始执行就将变量status=falsethis.status=false//执行请求函数this.fn()}
}

实用技能一：防抖与节流相关推荐

防抖节流_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点「~函数防抖与节流 ~」每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
前端面试查漏补缺--(一) 防抖和节流
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
resize函数_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点「~函数防抖与节流 ~」每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
uniapp 输入框防抖节流_拉动一下控制台大小，后台请求数量爆炸，竟是没做好防抖与节流...
点击上方☝Java编程技术乐园,轻松关注!及时获取有趣有料的技术文章文章很好,耐心阅读,记得点赞和关注哦~ 前言最近有个朋友在面试过程中遇到一个问题:什么是防抖和节流?糟了,这可触碰到我的知识盲区 ...
防抖和节流含义及区别图文详解秒懂
防抖和节流都是为解决短时间内频繁触发某个功能函数而导致的性能问题.比如,触发频率过高而导致响应速度跟不上,以致出现延迟,假死或卡顿的现象. 防抖图解:一件事情,计划5s以后触发,结果中途意外触发了, ...
防抖节流_关于防抖和节流
虾扯蛋之函数防抖和节流 - 掘金先贴贴这个哥们的. 因为我看了很多,感觉大多都是复制.没有啥思考在介绍以下这些问题的时候.先公示下我思考的时候出现的问题 1.如果你使用 onclick 和 ad ...
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流参考文章: (1)输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue ...
vue防抖和节流是什么_防抖和节流为什么重要！！！
是什么防抖和节流两者类似[但并不一样]是用来控制某一函数在特定时间内执行次数的技术点. 什么时候重要在给Dom绑定事件的时候显得尤为重要,因为相当于在事件函数和Dom之间加了一层控制层. 为什么重 ...
防抖节流_面试必备考点：防抖与节流
戳蓝字"Web前端严选"关注我们哦! 手写防抖和节流 1.引言「防抖和节流的产生」浏览器的resize.scroll.keypress.mousemove操作时会频繁触发,如果 ...