函数防抖debounce和节流throttle

最新推荐文章于 2023-03-21 10:45:00 发布

苏Sue酥

最新推荐文章于 2023-03-21 10:45:00 发布

阅读量158

点赞数 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);
  };
}

函数节流和函数防抖的区别

函数节流是减少连续的高频操作函数执行次数(例如连续调用 10 次, 可能只执行 3-4 次)
函数防抖是让连续的高频操作时函数只执行一次(例如连续调用 10 次, 但是只会执行 1 次)

学习笔记 ❥(^_-)

苏Sue酥

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数防抖debounce和节流throttle

debounce 函数防抖1.什么是函数防抖函数防抖是优化高频率执行 js 代码的一种手段可以让被调用的函数在一次连续的高频率操作过程中只被调用一次2.函数防抖的作用减少代码执行次数，提升网页性能3.函数防抖的应用场景oninputonmousemoveonscrollonresize等等4.搜索框中的函数防抖应用输入框中每输入一次内容调一次接口，当连续频繁的触发，影响性能，防抖的作用：在连续触发的短时间内只触发一次<form action="">
复制链接

扫一扫