JavaScript-节流和防抖

最新推荐文章于 2022-11-30 18:26:20 发布

小爱丨同学

最新推荐文章于 2022-11-30 18:26:20 发布

阅读量120

点赞数

分类专栏：学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_44165263/article/details/118887901

版权

学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

1. 防抖

防抖，解决触发过于频繁的问题，只需要最后一次触发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流和防抖</title>
  <link rel="text/css" href="../source/bootstrap.min.css">
</head>
<body>
  <!-- 防抖 -->
  <script>
    /*
      防抖，解决触发过于频繁的问题，只需要最后一次触发.
      例如，你的输入框在所有输入完成之后（停止输出2s之后），在控制台打印结果。中间结果不需要。
    */ 
    function debounce(fn, time) {
      // 规定在0.5秒之内只能触发一次
      let t = null;	// 记录setTimeout标识
      return function(...args){
        clearTimeout(t);  // 注销标识，清除上一次触发。
        t = setTimeout(function() {
         fn(...args);
        }, time);
      }
    };
    const test = debounce((event) => {
      console.log('input', event.target.value);
    }, 2000);

  </script>
  <input oninput="test(event)" type="text">
</body>
</html>

按钮防抖，防止重复点击

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流和防抖</title>
</head>
<body>
  <button id="test">点击-防抖</button>
  <button id="test2">点击-不防抖</button>
  <!-- 防抖 -->
  <script>
    function debounce(fn, time) {
      // 规定在0.5秒之内只能触发一次
      let t = null;
      return function(...args){
        clearTimeout(t);  // 清除上一次触发
        t = setTimeout(function() {
         fn(...args);
        }, time);
      }
    };
    window.onload = function () { 
      let test = document.getElementById('test');
      test.onclick = debounce(function() {
        console.log('click')
      }, 500);  // 在连续点击停止之后，才会输出

      let test2 = document.getElementById('test2');
      test2.onclick = function() {
        console.log('click-不防抖')
      };  //  点一下输出一次

     }
  </script>
</body>
</html>

2. 节流

节流，控制执行次数，例如0.5s至多执行一次

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流和防抖</title>
  <link rel="text/css" href="../source/bootstrap.min.css">
</head>
<body style="height: 1000px">
  <script>
    /*
      节流，控制执行次数。
      例如，onscroll的执行比较频繁，我不想响应那么多次，那么可以使用节流。
    */ 
    function throttle(fn, time) {
      // 规定在0.5秒之内只能触发一次
      let flag = true;
      return function(...args){
        if (flag) {
          setTimeout(function() {
            fn(...args);
            flag = true;
          }, time);
        }
        flag = false;
      }
    };
  </script>
  <script>
    window.onscroll = throttle(function(event) {
      console.log('scroll')
    }, 500); // 每个0.5s才输出一次scroll
    // window.onscroll = function(){
    //   console.log(2)
    // }; // 会输出很多2
  </script>
</body>
</html>

小爱丨同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-节流和防抖

@[DOC]1. 节流节流，控制执行次数，例如0.5s至多执行一次function debounce(fn, time) { // 规定在0.5秒之内只能触发一次 let t = null; return function(){ clearTimeout(t); // 清除上一次触发 t = setTimeout(function() { fn(); }, time); }};window.onscroll = debounce(function
复制链接

扫一扫