防抖和节流

最新推荐文章于 2024-07-10 19:58:24 发布

bingqise5193

最新推荐文章于 2024-07-10 19:58:24 发布

阅读量171

点赞数

分类专栏：面试题重点总结 2021 文章标签： js 面试

本文链接：https://blog.csdn.net/bingqise5193/article/details/109003190

版权

面试题重点总结 2021 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

为什么要防抖和节流

一些持续触发的事件，如 resize、scroll、mousemove、拖拽等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

一些的具体场景：

监听浏览器滚动事件，返回当前滚条与顶部的距离，页面resize事件，常见于需要做页面适配的时候
搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，方案要看业务需求。

那么具体看看防抖和节流：

防抖：

当持续触发事件时，设定的时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
在这里插入图片描述

节流：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
在这里插入图片描述

总结：

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理只有执行完后才重新设置定时器。

区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

常见使用场景

节流：无限加载场景，实时搜索
防抖：页面resize, 计算滚动条与顶部距离，提交

手写节流防抖

手写节流防抖一定要先理解节流防抖的意思，然后抓住其主要原理，具体解析如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>>节流防抖</title>
</head>
<body>
  <button id="app">click</button>
  <button id="app1">click1</button>
  <script>
      // 防抖：只有在设定时间内不再触发事件，才会执行相应的函数, 只要触发了事件就重设计时器
      // 场景：缩放窗口，提交事件
      function debounce(func, delay, ...params) {
        // 私有变量计时器
        let timer = null
        return function () {
            // 只要出发了事件就重设计时器
            clearTimeout(timer)
            timer = setTimeout(function() {
                func(...params)
            }, delay)          
        }
      }
      function print(name, age) {
        console.log(Math.random()+name+age)
      }
      // addEventListener里面必须是一个函数，所以debounce需要返回一个函数
      document.getElementById('app').addEventListener('click', debounce(print, 1000, 'lf', 18))

      // 节流：持续触发事件，在限定的时间内只会执行一次相应的函数, 执行完后重设计时器
      // 场景：无限图片，实时搜索
      function throttle(func, delay, ...params) {
        // 私有变量计时器
        let timer = null
        return function () {
            // 只有执行完后才重新设置定时器
            if(!timer) {
                timer = setTimeout(function() {
                    func(...params)
                    timer = null
                }, delay)   
            }       
        }
      }
      // addEventListener里面必须是一个函数，所以debounce需要返回一个函数
      document.getElementById('app1').addEventListener('click', throttle(print, 1000, 'lf', 18))
  </script>
</body>
</html>