防抖和节流

临在❀

已于 2023-05-12 19:36:07 修改

阅读量88

点赞数

分类专栏：前端JS面试题文章标签： javascript 前端开发语言

于 2023-03-13 03:03:09 首次发布

本文链接：https://blog.csdn.net/weixin_43850639/article/details/129484073

版权

前端JS面试题专栏收录该内容

37 篇文章 2 订阅

订阅专栏

防抖和节流

防抖：

防抖，就是防止抖动，“你先抖动着，啥时候停了，再执行下一步”

例如：一个搜索输入框，在输入停止之后，再触发搜索

最简单的防抖节流：
有一个搜索框
用户在里面输入
在输入的过程中不会打印输入值
在输入完成之后的300毫秒之后会打印输入值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>debounce</title>
</head>
<body>
  <p>debounce</p>
  搜索 <input id="input1">
  <script>
    // 默认延迟200毫秒，如果传入的有值，就优先传入的值
    function debounce(fn, delay = 200) { 
      let timer = null;

      return function () { 
        if(timer) clearTimeout(timer)

        timer = setTimeout(()=>{
          fn.apply(this, arguments)//透传this和参数
          timer = null;
        },delay)
       }
     }
     const input1 = document.getElementById('input1')
     input1.addEventListener('keyup', debounce(()=>{
      console.log("搜索", input1.value)
     }),300)
  </script>
</body>
</html>

节流：

节流，节省交互沟通，流，不一定指流量。
“别急，一个一个来，按时间节奏来，插队无效”

例如：drag或scroll期间触发某个回调，要设置一个时间间隔

最简单的节流代码：

一个可以推拽的div
拉动拖拽
每隔300ms打印一个x,y鼠标坐标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>throttle</title>
</head>
<body>
  <p>throttle</p>
  <div id="div1" draggable="true" style="width: 100px; height: 50px; background-color: #ccc; padding: 10px;">可拖拽</div>
  <script>
    // 默认延迟200毫秒，如果传入的有值，就优先传入的值
    function throttle(fn, delay = 200) { 
      let timer = null;

      return function () { 
        if(timer) return

        timer = setTimeout(()=>{
          fn.apply(this, arguments)//透传this和参数
          timer = null;
        },delay)
       }
     }
     const div1 = document.getElementById('div1')
     div1.addEventListener('drag', throttle((e)=>{
      console.log("鼠标的位置", e.offsetX, e.offsetY)
     }),300)
  </script>
</body>
</html>

在这个节流函数实现中，timer = null; 这一句是用来清除定时器ID的。timer变量存储了setTimeout()返回的定时器ID。当定时器触发并执行完毕后，将timer设置为null，表示当前没有活动的定时器。

如果不写timer = null;，timer变量将保留上一次setTimeout()返回的定时器ID。在这种情况下，由于timer变量始终不为null，节流函数中的条件if (timer) return将一直成立。这将导致fn函数在第一次执行后再也无法触发执行。

因此，timer = null;这一行是为了确保在每次执行完fn函数后，节流函数可以继续在下一个延迟周期正常工作。这样，当新的事件触发时，节流函数将正确地控制fn函数的执行频率。

为什么要对搜索栏做防抖处理，如果用户的输入不定性太大，怎样尽可能避免无用请求

对搜索栏进行防抖处理的目的是为了减少不必要的请求和提升用户体验。防抖处理可以避免在用户输入频繁或连续输入时频繁触发搜索请求，而是等待一定的延迟时间，只发送一次请求，从而降低服务器负载和网络流量。

当用户的输入不定性太大，可能会导致频繁触发搜索请求，这可能会给服务器带来压力，同时也会浪费网络资源。为了尽可能避免无用请求，可以考虑以下几点：

设置适当的延迟时间：在用户输入时设置一个适当的延迟时间，等待用户停止输入后再发送搜索请求。通过设置合理的延迟时间，可以减少请求的次数，避免不必要的请求。
最小字符限制：设置一个最小字符限制，只有当用户输入的字符达到一定数量时才触发搜索请求。这样可以避免用户输入短暂的字符时就发送请求，只在输入内容具有一定的意义时才执行搜索操作。
使用输入验证：在用户输入之前，可以进行一些输入验证，例如校验输入的格式、类型等。通过对输入进行验证，可以避免用户输入无效的数据，从而减少无效的搜索请求。
监听输入结束事件：除了延迟触发搜索请求外，还可以监听输入结束事件，例如监听输入框的 blur 事件（失去焦点事件），当输入框失去焦点时触发搜索请求。这样可以确保用户完成输入后再发送请求，避免频繁的请求触发。

综合考虑以上几点，可以根据具体情况选择适当的策略来避免无用请求。根据用户的输入特点和实际需求，合理设置延迟时间、字符限制以及输入验证等，以提供更好的搜索体验和优化请求效率。