防抖和节流

1. 概念：

• • 防抖(debounce)：延迟一定时间执行函数。在指定的时间间隔内，无论触发多少次函数，只有最后一次函数会在间隔时间结束后执行。
  • 节流(throttle)：控制函数执行的频率，在一定时间间隔内只执行一次函数。

　　  2. 应用:

• • 防抖：
    • 搜索框输入：只有用户停止输入后才执行搜索功能。
    • 按钮点击：防止误操作，用户连续点击只执行最后一次操作。
  • 节流：
    • 监听面板宽高改变事件：按照一定的频率执行函数。
    • 监听slider滑块变化事件：按照一定的频率执行函数。
    • 监听滚动条事件：按照一定的频率执行函数。

　　　3. 代码实现:

• • 防抖：
    

     1 // 防抖函数
     2 function debounce(fn, delay) {
     3     let timer;
     4     return function() {
     5         if(timer) clearTimeout(timer);
     6         timer = setTimeout(()=>{
     7            fn();
     8         }, delay);
     9     }
    10 }
    11 
    12 
    13 // 测试方法, 给id="aaa"的元素绑定点击事件，一直点击aaa元素，点击停止1s后，控制台输出1；
    14 function log(){
    15     console.log(1);
    16 }
    17 
    18 const newLog = debounce(log, 1000);
    19 
    20 document.getElementById("aaa").onclick=function(){
    21     newLog();
    22 };

  • 节流：
    

    // 节流函数
    function throttle(fn, limit) {
        let valid = true;
        return function() {
            if (!valid) return;
            valid = false;
            setTimeout(()=>{
                fn();
                valid = true;
            }, limit)
        }
    }
    
    // 测试防范，给id="aaa"的元素绑定点击事件，一直点击aaa元素，每隔1s，控制台输出1；
    function log(){
        console.log(1);
    }
    
    const newLog = throttle(log, 1000);
    
    document.getElementById("aaa").onclick=function(){
        newLog();
    };