JS基础-防抖和节流

2021-11-20 本文已影响0人 wo不是黄蓉

前言

一直以来都有使用防抖和节流函数，但是奈何两个概念太过相似，因此一直理解不清楚，今天专门花时间写了个例子，来感受一波防抖和节流到底有什么区别。

防抖：一个事件发生一定时间之后才会执行特定的动作
- 一段时间内执行多次，只有最后一次生效。举个栗子：123会每移入一次就会执行一次，但是只有等到执行的动作超过2秒之后才会打印234，234里面的代码就是防抖要执行的代码。一直触发间隔小于2秒不会执行。
  一个更形象的例子：提交表单的时候，后端还没响应回来，我们会忍不住又点了一次，这样在提交的时候就会增加两条一样的信息。为了防止这种操作，我们前端就控制让其点了一次之后等过n秒之后才能再次提交。当然前端使用这种方式是不可能完全解决这种问题的，需要后端使用幂等函数来解决。
节流：在n秒内触发多次，等待n秒之后再执行
- 一段时间内执行多次，每隔一段时间之后才会被触发：例子：123会每移入一次就会执行一次，但是只有等到执行的动作。就算是你触发的间隔小于2秒，但是执行的间隔时长超过了5秒也还是会被执行的。

注意点：

传入的函数可以拥有自己的this,如果不指定的话就默认指向window,这时如果我们想给每一box设置不同的样式的时候就设置不上。因此需要使用call或者apply来改变this指向问题。
传入的函数可以带参数，需要将原来的参数传到被执行的函数中。call,apply可以传参，只是传参形式不同。
废话不多说上代码：

     <!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>Document</title>
    <style>
      body {
        background-color: gray;
      }
      #box,
      #box1 {
        width: 400px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        margin: 0 auto;
        font-size: 80px;
      }
    </style>
  </head>
  <body>
<!--写一个box给其绑定mouseover事件，鼠标移上去就会触发-->
    <div id="box">1</div>
    <div id="box1">1</div>
    <script>
      let count = 1;
      let box = document.getElementById("box");
      let box1 = document.getElementById("box1");
      //debounce相当于是鼠标移上去的时候执行的函数，但是如果带上()就是执行函数，因此我们需要让debounce函数返回一个函数，以供执行真正的操作
      box.onmouseover = debounce(handleMouseOver, 2000);
      box1.onmouseover = debounce(handleMouseOver1, 2000);
      box.onmouseover = throttle(handleMouseOver, 5000);
      function handleMouseOver(e) {
        console.log(234);
        this.style.color = "red";
        box.innerHTML = parseInt(box.innerText) + 1;
      }
      function handleMouseOver1(e) {
        this.style.color = "green";

        box1.innerHTML = parseInt(box1.innerText) + 2;
      }

      //防抖函数
      function debounce(fn, await) {
        let timer = null;
        return function () {
          let args = arguments;
          let context = this;
          clearTimeout(timer);
          console.log(123);
          timer = setTimeout(function () {
            fn.call(context, ...args);
          }, await);
        };
      }

  //节流函数
      function throttle(func, wait) {
        var context, args;
        var previous = 0;
        return function () {
          console.log(123);
          var now = +new Date();
          context = this;
          args = arguments;
          if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
          }
        };
      }
    </script>
  </body>
</html>

2022.3.19补充
节流函数的另一种实现方式：

//使用定时器
function throttle(fn,wait){
  let timer = null;
  return function(){
    let context = this,args = arguments;
    //只有在当前的timer执行完毕销毁之后才会进行下一次的调用
    if(!timer){
      timer = setTimeout(()=>{
        fn.call(context,...args)
      },wait)
    }
  }
}

两者的区别：
防抖函数：在一定时间内执行一个方法多次，只执行最后一次。因为在事件触发会先清理timer，如果时间间隔不到则会被清理掉，只有你的间隔到了之后才会执行，因此前面的函数都会被清理掉。
节流函数：在一定时间内执行一个方法多次，只有第一次生效。因为在事件触发后会先判断timer是否存在，只有不存在的时候才会执行。
相当于防抖是强制清理，节流是不到时间进不了大门。

JS基础-防抖和节流

前言

注意点：

猜你喜欢

热点阅读