防抖和节流

防抖:在一定时间范围内函数只执行一次,而且执行的是最后一次触发的该函数

    // 防抖函数
    function debounce(fn, delay) {
      // 通过闭包共享变量
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(fn, delay)
      }
    }

节流:在指定时间间隔内执行某一函数,时间间隔外即使触发也不执行该函数

    // 节流函数
    function throttle(fn, delay) {
      let timer = null
      // 默认阀门开启,可以正常执行
      let isClose = false
      return function () {
        if (isClose) {
          return false
        }
        isClose = true
        timer = setTimeout(() => {
          fn()
          isClose = false
        }, delay)
      }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所...
    TurnHug阅读 669评论 0 2
  • 防抖和节流的作用都是防止函数多次调用。防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次...
    北拉_8d94阅读 865评论 0 2
  • 基本对比: 函数防抖基本应用 函数防抖在执行目标方法时,会等待一段时间。当又执行相同方法时,若前一个定时任务未执行...
    匿名1阅读 280评论 0 0
  • 在前端开发中有一部分用户行为会频繁出发事件执行。而对于DOM操作、资源加载等耗性能的处理,很可能导致界面卡顿,甚至...
    她是我的bug阅读 530评论 0 0
  • 1.首先聊下什么是防抖,什么是节流,在什么场景下会用到。 防抖:防抖是控制次数,指触发事件后,在 n 秒内函数只能...
    kkgo_阅读 374评论 1 2