今天学习了函数节流与防抖对此做点小结

函数节流

函数节流与防抖在做什么事情呢？其实是在控制事件处理程序的执行频率

但我们为什么要控制事件回调的执行频率呢？是因为在浏览器当中有一些事件比如说 onresize事件也就是窗口的变化事件和 mousemove鼠标移动事件还有 scroll事件窗口滚动事件这些事件的触发频率非常高极有可能会造成页面卡顿如果说在这个事件处理程序当中还包含了与后端的交互这样还会给后端增加很多压力所以这个时候函数的节流与防抖控制频率就显得非常重要了

下面通过代码实现向大家演示 节流

04-throttle.js

// 第一个参数是回调 第二个参数是等待间隔
function throttle(callback, wait){
  // 定义开始时间
  let start = 0;
  // 返回结果是一个函数
  return function(e){
    // console.log('iloveyou');
    // 获取当前的时间戳
    let now = Date.now();
    // 判断
    if(now - start >= wait){
      // 若满足条件 则执行回调函数
      callback.call(this, e);
      // 修改开始时间
      start = now;
    }
  }
}

04-throttle.html

<!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>节流测试</title>
  <script src="04-throttle.js"></script>
  <style>
    body{
      height: 2000px;
      background: linear-gradient(#125,#eae);
    }
  </style>
</head>
<body>
  <script>
    //绑定滚动事件
    // window.addEventListener('scroll',function(){
    //   console.log(Data.now());
    // })

    window.addEventListener('scroll',throttle(function(e){
      // console.log(Date.now());
      // console.log(this);
      console.log(e);
    },500));
  </script>
</body>
</html>

如果在 04-throttle.html 单纯调用 function函数鼠标一次滚动可能会有十几次的滚动事件触发而这对我们服务器性能的消耗是很大的我们需要对此进行性能的优化我们在 04-throttle.js 自定义了throttle函数它具备两个形参第一个是我们的回调函数 第二个是时间间隔 我们设定在同一时间间隔中只执行一次callback() 这样便会降低事件触发的频率提升性能优化

注意点

时间间隔通过获取两次时间戳进行差值判断就可以得到
throttle自定义函数的返回值必须是一个函数事件否则无法被监听
JS中 this指向的是事件源谁调用this就是谁的

函数防抖

函数防抖跟函数节流有些区别，函数防抖 是当事件触发之后它不会立即执行回调函数而是会等待一段时间再去执行回调在等待的时间过程中如果你再次触发了事件它会再次等待上一个事件处理程序则不会执行直到有新事件触发等待超过时间间隔才进行回调

举个例子，我们设置时间间隔是1s 事件是A 当我们触发事件A超过等待时间间隔(1s)时触发事件A回调而如果是我们触发了时间A并在同一等待时间间隔内(1s)再次触发事件A(一次或多次，例如总共触发了5次) 那么触发事件A只有在最后一次触发才回调(也就是第5次才会进行回调，前面的回调都被取消因为是最后一次所以最后不会有新的触发事件A了等待时间超过时间间隔了1s了所以第5次触发回调进行)

下面通过代码实现向大家演示 防抖

05-debounce.js

function debounce(callback, time){
  // 定时器变量
  let timeId  = null;
  // 返回一个函数
  return function(e){
    // 判断
    if(timeId !== null){
      // 清空定时器
      clearTimeout(timeId);
    }
    // 启动定时器
    timeId = setTimeout(() => {
      // 执行回调
      callback.call(this, e);
      // 重置定时器
      timeId = null;
    }, time);
  }
}

05-debounce.html

<!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>防抖测试</title>
  <script src="05-debounce.js"></script>
</head>
<body>
  <input type="text">
  <script>
    let input = document.querySelector('input');

    // 当键盘按下时 会有对应的keyCode返回
    // input.onkeydown = function(e){
    //   console.log(e.keyCode);
    // }

    input.onkeydown = debounce(function(e){
      console.log(e.keyCode);
    },1000);
  </script>
</body>
</html>

setTimeout定时器有个特点是它内部的this指向外层作用下this的值所以 05-debounce.js 中的callback参数直接写this就可以

debounce的返回值必须是一个函数因为我们本来就需要给onkeydown绑定(/定义)事件如果不是函数的话 onkeydown事件在触发之后没法去执行回调

return返回的函数需要加事件回调（事件对象）参数因为内部要用到的话会往里边传入参数如果你没有形参去接收到时候没有办法获取到事件对象

下图的timeId虽然设置为null 但debounce函数在二次调用的情况下timeId并不等于null 而是上个定时器留给我们的timeId值所以下面的if判断如果过了时间间隔执行if判断是无用功的因为上个定时器已经执行完便已经失效了我们想要的是：当未超过同一时间间隔时, 调用新的定时器则清空上一个定时器

超过同一时间间隔应该交由setTimeout定时器去重置timeId值就行降低性能资源消耗

所以，if判断和setTimeout对timeId值的重置都不能省因为一个是未执行的清空另一个是执行完的清空我们的目标效果是同一时间间隔有多个定时器调用时只执行最后一个定时器的回调

而下图中的 timeId = null 如果没有写的话目标效果虽然也能达成但是有小瑕疵逻辑并不严谨执行了些无用代码因为它每一次都要进入if判断语句去清空（如果定时器执行完的话（也就是超过了time时间间隔后才执行任务））它的清空是没用的因为上个定时器已经执行完失效了所以这会造成浪费性能 正确方式是 在setTimeout定时器最后补上语句 timeId = null 重置定时器变量当我们在上一次定时器执行成功时执行回调之后应该要将这个定时器变量给它复原以此来优化性能更为合理一些

小结

通过自定义 debounce 事件就可以很好的控制事件的触发频率特别是相关关键字搜索的功能它与服务器是直接挂钩的你输入什么就会传递给服务器什么如果你不控制触发频率程序便会向服务器发送大量请求给服务器造成压力这是我们当前对防抖做的一个实现

补充

怎么理解input.onkeydown = function (e) { console.log(e.keyCode);}

这段代码是给input元素添加了一个keydown事件的监听器（onkeydown是监听器，不是用户自定义属性，详细见下面介绍）。当用户在该input元素中按下键盘上的任意按键时，事件处理函数会被触发。

在事件处理函数中，通过e.keyCode可以获取按下的按键的键码值。键码值是每个按键在键盘上的唯一标识符，不同的按键对应不同的键码值。通过输出e.keyCode到控制台，可以查看用户按下的具体按键的键码值。

这段代码的作用是在用户按下键盘按键时，将对应按键的键码值打印到控制台，以便开发者进行调试或处理特定按键事件。

讲一下input.onkeydown

input.onkeydown是一个事件属性*（默认为 null ，无绑定行为方法）*，用于指定当用户在input元素中按下键盘按键时所要执行的事件处理函数。

当keydown事件被触发时，绑定在input.onkeydown属性上的函数将被调用。这个事件可以在用户按下键盘上的任意按键时触发，包括字母、数字、功能键等。

通过为input.onkeydown属性赋值一个函数，可以定义该事件的处理逻辑。事件处理函数接受一个参数（通常命名为event或缩写为e），该参数包含有关事件的信息，如按下的按键、键码值等。

在事件处理函数中，可以根据需要编写逻辑，处理用户按键的操作。比如，可以通过检查键码值来判断用户按下的具体按键，执行相应的操作或触发其他事件。

总结：input.onkeydown是一个事件属性，用于指定按下键盘按键时的事件处理函数。通过赋值一个函数给这个属性，可以定义按键事件的处理逻辑。

onkeydown是一个自定义属性吗？

**onkeydown是一个标准的事件属性，而不是自定义属性。**在HTML DOM中，很多元素都具有类似的事件属性，用于指定特定事件发生时要执行的函数。

例如，onkeydown是用于指定键盘按键按下时的事件处理函数。其他常见的事件属性包括onclick、onmouseover、onsubmit等，分别用于指定点击事件、鼠标悬停事件、表单提交事件等的处理函数。

这些事件属性是浏览器提供的标准属性，用于绑定事件处理函数，使开发者能够对特定事件做出响应。通过给这些事件属性赋值一个函数，可以将该函数绑定到相应的事件上，以便在事件触发时执行相应的逻辑。

他们是监听某一行为，如果监听到行为则触发绑定在他们身上的事件吗？

是的，这些事件属性充当了事件监听器。当特定行为发生时，例如点击、鼠标悬停、键盘按键按下等，浏览器会检测到该行为并触发对应的事件。如果在相应的事件属性上绑定了一个函数，浏览器会调用该函数来执行事件处理逻辑。

举个例子，当用户在页面上点击一个元素时，浏览器会检测到点击事件，并触发元素的onclick事件。如果在该元素的onclick属性上绑定了一个函数，浏览器就会调用这个函数来执行相应的逻辑。

类似地，当用户在输入框中按下键盘按键时，浏览器会检测到键盘按键按下的事件，并触发相应的keydown事件。如果在输入框的onkeydown属性上绑定了一个函数，浏览器会调用这个函数来处理该事件。

因此，这些事件属性充当了监听器，用于监听特定行为并触发相应的事件处理函数。

他们内部代码已经封装好监听代码吗？比如onkeydown属性监听keydown方法，我这样理解对吗？

是的，这些事件属性内部已经封装了对应的事件监听代码。浏览器在解析 HTML 页面时，会自动识别这些事件属性，并在内部为其创建事件监听器。

对于 onkeydown 属性来说，浏览器会自动将其绑定到对应元素的键盘按键按下事件上。当用户按下键盘上的任意按键时，浏览器会检测到该按键按下的事件，并自动触发元素的 keydown 事件。

这意味着，你可以通过在 onkeydown 属性上绑定一个函数，将这个函数作为键盘按键按下事件的处理函数。当按键按下事件发生时，浏览器会调用绑定在 onkeydown 属性上的函数来执行相应的逻辑。

所以，你的理解是正确的：onkeydown 属性充当了监听键盘按键按下事件的功能，并在内部封装了相应的监听代码。

所以input.onkeydown = function (e)是绑定事件而不是赋值吗？（这里绑定事件跟赋值是同一个东西，我的shit提问...）

实际上，input.onkeydown是一个属性，通过赋值一个函数给这个属性，可以将该函数绑定为keydown事件的处理函数。在这种情况下，我们可以说是将函数赋值给了input.onkeydown属性。

当用户在input元素中按下键盘按键时，浏览器会检测到该事件并触发keydown事件。如果存在绑定在input.onkeydown属性上的函数，浏览器会调用这个函数来处理该事件。

所以，可以将input.onkeydown理解为给input元素的keydown事件注册一个处理函数。通过将函数赋值给这个属性，实际上是将该函数绑定到了对应的事件上，以便在事件触发时执行相应的逻辑。

讲一下事件监听器

事件监听器是用于监听特定事件的函数或方法。它们用于捕捉和处理事件，当事件发生时，会触发相应的监听器函数。

事件监听器通常与特定的事件属性或方法相关联。例如，在JavaScript中，可以使用addEventListener方法来为元素添加事件监听器。该方法接受两个参数，第一个参数是要监听的事件类型，第二个参数是事件发生时要执行的函数。

事件监听器的工作原理是，当事件发生时，浏览器会将事件传递给相关的元素或对象，并调用与该事件关联的监听器函数。监听器函数可以包含处理事件的逻辑，例如更新页面内容、执行操作或触发其他事件。

通过使用事件监听器，我们可以对特定的事件进行响应和处理，使我们的代码可以与用户的操作、浏览器的行为和其他交互事件进行交互和响应。

【自定义函数工具库】- 函数节流与函数防抖