• 函数的节流和防抖?节流和防抖的区别及实现


    一.防抖和节流的本质

    本质上就是优化高频率执行代码的一种手段。

    比如说:浏览器的scroll,keypress,mousemove,resize等事件在触发时,会不断的调用绑定在事件上的回调函数,会极大地浪费资源,降低前端的性能。

    因此为了优化用户体验,需要对这类事件进行调用次数的限制,我们可以采用throttle(节流)和debounce(防抖)的方式来减少调用频率。

    二.定义

    节流:单位时间内(n秒)只运行一次,若在单位时间内(n秒)内重复触发,只有一次执行;

    防抖:单位时间后(n秒)再执行该事件,若在单位时间内(n秒)被重复触发,则重新计时。

    打个比喻来说明一下:

    想象每天在办公楼乘坐的电梯,把电梯完成一次运送,类比为一次函数的执行和响应。

    假设电梯有两种运行方式:防抖和节流,超时设定为10秒。第一个人进来电梯后,10秒后准时运送一次,这就是节流;当电梯打开进来一人后,等待10秒。如果在这10秒内又有人进来了,10秒等待重新计时,直到10秒后开始运行,这就是防抖。

    三.用代码实现一下

    (1)节流

    完成节流可以使用时间戳与定时器的写法。使用时间戳写法,事件会立即执行,停止触发后函数没有办法再次执行。

    1. function throttled(fn, delay = 500) {
    2. let timestamp1 = Date.now()
    3. return function (...args) {
    4. let timestamp2 = Date.now()
    5. if (timestamp2 - timestamp1 >= delay) {
    6. fn.apply(null, args)
    7. timestamp1 = Date.now()
    8. }
    9. }
    10. }

    然后使用定时器写法,500毫秒后第一次执行,第二次事件触发后依然会再一次执行。

    1. function throttled(fn, delay = 500) {
    2. let timestamp = null
    3. return function (...args) {
    4. if (!timestamp) {
    5. timestamp = setTimeout(() => {
    6. fn.apply(this, args)
    7. timestamp = null
    8. }, delay)
    9. }
    10. }
    11. }

    也可以将时间戳写法的特性和定时器写法相结合,实现一个更好的节流函数:

    1. function throttled(fn, delay = 500) {
    2. let timestamp = null
    3. let starttime = Date.now()
    4. return function () {
    5. let currentTime = Date.now()//当前时间
    6. let remaintime = delay - (currentTime - starttime)//从上一次到现在,还剩下多少剩余时间
    7. let self = this
    8. let args = arguments
    9. clearTimeout(timestamp)
    10. if (remaintime <= 0) {
    11. fn.apply(self, args)
    12. starttime = Date.now()
    13. } else {
    14. timestamp = setTimeout(fn, remaintime)
    15. }
    16. }
    17. }

    (2)防抖

    1.简单实现的方式:

    1. function debounce(fn, waittime) {
    2. let timestamp
    3. return function () {
    4. let self = this//保存this指向
    5. let args = arguments//获取到事件对象
    6. clearTimeout(timestamp)
    7. timestamp = setTimeout(function () {
    8. fn.apply(self, args)
    9. }, waittime)
    10. }
    11. }

    2.防抖立即执行的话,可加入第三个参数用于判断

    1. function debounce(fn, waittime, immediate) {
    2. let timestamp
    3. return function () {
    4. let self = this//保存this指向
    5. let args = arguments//获取到事件对象
    6. if (timestamp) clearTimeout(timestamp)//timestamp不为空
    7. if (immediate) {
    8. let rightNow = !timestamp//第一次会立即执行,以后只有事件执行后才会再次触发
    9. timestamp = setTimeout(function () {
    10. timestamp = null
    11. }, waittime)
    12. if (rightNow) {
    13. fn.apply(self, args)
    14. }
    15. } else {
    16. timestamp = setTimeout(function () {
    17. fn.apply(self, args)
    18. }, waittime)
    19. }
    20. }
    21. }

    三.防抖和节流的区别

    (1)相同点

    都可以通过setTimeout实现;

    目的都是降低回调执行频率。

    (2)不同点

    函数防抖:在一段连续操作结束后,处理回调,利用clearTimeoutsetTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能;

    函数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。

    例如:都设置时间频率为500毫秒,在2秒时间内,频繁触发函数,节流会每隔500毫秒就执行一次。而防抖,则不管调用多少次方法,在2秒后,只会执行一次。

    看张图:

     

    四.应用场景

    1.防抖在连续的事件,只需触发一次回调的场景有:

    搜索框搜索输入。只需要用户最后一次输入完,再发送请求;

    手机号及邮箱验证输入检测;

    窗口大小resize。只需要窗口调整完成后,计算窗口大小。防止重复渲染。

    2.节流在间隔一段时间执行一次回调的场景有:

    滚动加载。加载更多或滚到底部监听.

  • 相关阅读:
    Java SE 学习笔记(十四)—— IO流(2)
    pandas使用pd.DatetimeIndex函数将字符串日期列表数据转化为时间索引数据DatetimeIndex
    全局异常捕获工具类
    Part2_扩展MATSIM_Subpart4_除个人车外的其他模式_第23章 动态运输服务
    SpringCloud的Consul
    SpringCloud Alibaba - Sentinel 微服务保护解决雪崩问题、Hystrix 区别、安装及使用
    (最新版2022版)剑指offer之搜索算法题解
    马化腾去年年薪同比下降 25%,腾讯的下一步怎么走?
    Zabbix搭建使用一篇通
    腾讯云服务器4核8G性能,和阿里云比怎么样?
  • 原文地址:https://blog.csdn.net/huihui_999/article/details/128165063