笔记：防抖与节流

最新推荐文章于 2024-07-25 14:04:18 发布

北极之光_

最新推荐文章于 2024-07-25 14:04:18 发布

阅读量81

点赞数 1

文章标签：笔记 javascript 前端

本文链接：https://blog.csdn.net/weixin_42596287/article/details/136815709

版权

1、防抖：在规定时间内，多次触发只执行最后一次。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
</head>
<body>
  <div>防抖：在规定时间内，多次触发只执行最后一次。</div>
  <input type="text" id="input" />
  <script>
    // 示例一：输入框搜索
    let input = document.getElementById("input");
    input.addEventListener("keyup", function(e){
      debounce(()=> {
        request(e.target.value);
      },2000);
    })

    function request(value){
      console.log(value,"---"+new Date);
    }

    // 示例二：滚动条滚动
    window.onscroll = function(){
      debounce(getData(),1000);
    }

    function getData(){
      return function(){
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollTop);
      }
    }

    // 防抖函数
    let timer = null;
    function debounce(func,delay){
      if(timer) clearTimeout(timer);
      timer = setTimeout(() => {
        typeof func === 'function' && func();
      }, delay);
    }
  </script>
</body>
</html>

2、节流：在规定时间内，多次触发只执行第一次。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
</head>
<body>
  <div>节流：在规定的时间内，多次触发只执行第一次。</div>
  <button id="btn">点我</button>
  <script>
    document.getElementById("btn").addEventListener("click",function(){
      throttle(()=> request(), 1000);
    })

    let value = 0;
    function request(){
      console.log(value++,"---"+new Date());
    }
    
    // 节流函数
    let oldTime = 0;
    function throttle(func,delay){
      let now = Date.now();
      if(now - oldTime > delay){
        typeof func === 'function' && func();
        oldTime = now;
      }
    }
  </script>
</body>
</html>