函数防抖debounce和节流throttle

苏Sue酥

于 2021-05-09 11:39:55 发布

阅读量199

点赞数 3

分类专栏： JS

本文链接：https://blog.csdn.net/ME_GIRL/article/details/116562708

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

debounce 函数防抖

1.什么是函数防抖

函数防抖是优化高频率执行 js 代码的一种手段
可以让被调用的函数在一次连续的高频率操作过程中只被调用一次

2.函数防抖的作用

减少代码执行次数，提升网页性能

3.函数防抖的应用场景

oninput
onmousemove
onscroll
onresize
等等

4.搜索框中的函数防抖应用

输入框中每输入一次内容调一次接口，当连续频繁的触发，影响性能，防抖的作用：在连续触发的短时间内只触发一次

<form action="">
  <input type="text" />
</form>
<script>
  let oInput = document.querySelector("input");
  let timer = null;
  oInput.oninput = function () {
    timer && clearInterval(timer);
    timer = setTimeout(() => {
      console.log(oInput.value);
    }, 1000);
  };
</script>

5.防抖函数的封装

function debounce(fn, delay) {
  let timer = null;
  return function () {
    let self = this; // this为调用者，如果不设置this的指向为window
    let args = arguments; // 参数
    timer && clearInterval(timer);
    timer = setTimeout(() => {
      fn.apply(self, args);
    }, delay || 1000);
  };
}

应用

let oInput = document.querySelector("input");
function debounce(fn, delay) {
  let timer = null;
  return function () {
    let self = this; // this为调用者，如果不设置this的指向为window
    let args = arguments; // 参数
    timer && clearInterval(timer);
    timer = setTimeout(() => {
      fn.apply(self, args);
    }, delay || 1000);
  };
}
oInput.oninput = debounce(function (event) {
  console.log("发送网络请求");
  console.log(this);
  console.log(event);
});

throttle 函数节流

1.什么是函数节流

函数节流也是优化高频率执行 js 代码代码的一种手段
可以减少高频调用函数的执行次数

2.函数节流的作用

减少代码执行次数，提升网页性能

3.函数节流应用场景

oninput
onmousemove
onscroll
onresize
等等

4.设置 div 的宽高是始终屏幕可视区域的一半

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<body>
  <div></div>
  <script>
    // 获取屏幕可视宽高
    function getScreen() {
      let width, height;
      if (window.innerWidth) {
        width = window.innerWidth;
        height = window.innerHeight;
      } else if (document.compatMode === "BackCompat") {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
      } else {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
      }
      return {
        width: width,
        height: height,
      };
    }
    let oDiv = document.querySelector("div");
    function resize() {
      let { width, height } = getScreen();
      oDiv.style.width = width / 2 + "px";
      oDiv.style.height = height / 2 + "px";
      console.log("gaibial");
    }
    resize();
    function throttle(fn, delay) {
      let timer = null;
      let flag = true; // 节流阀
      return function () {
        if (!flag) return;
        flag = false;
        let self = this;
        let args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
          flag = true;
          fn.apply(self, args);
        }, delay || 500);
      };
    }
    window.onresize = throttle(function () {
      resize();
    });
  </script>
</body>

5.节流函数的封装

function throttle(fn, delay) {
  let timer = null;
  let flag = true;
  return function () {
    if (!flag) return;
    flag = false;
    let self = this;
    let args = arguments;
    timer && clearTimeout(timer);
    timer = setTimeout(function () {
      flag = true;
      fn.apply(self, args);
    }, delay || 1000);
  };
}