JavaScript debounce和throttle的区别

debounce ：debounce 是一种技术，它延迟执行一个函数直到一定的时间过去。如果你有一个频繁使用的函数，比如一个滚动或调整大小的事件监听器，但是不想太频繁地触发它以免拖慢浏览器的速度，那么这个技术就很有用。

无论用户触发这个事件多少次，根据debounce的方法，连接的函数只会在用户停止触发事件后运行一次。例如：假设用户在100毫秒的时间内点击了一个按钮五次。在debounce的情况下，这个函数不会被调用。但是如果debounce时间是2000毫秒，在用户停止点击后的2000毫秒后，函数将会被调用。

优点：

• 减少了函数被调用的频率，可以提升性能并避免无用的工作。
• 避免无用的网络和API请求，节约资源和降低开销。
• 可以用来处理频繁发生的事件，比如滚动或调整大小，而不会给系统带来压力。

缺点：

• 这可能导致函数执行时间变长，当需要快速的答案时可能会有问题。如果debounce时间太长，可能会错过一些事件。

debounce的实现方法：

function debounce(func, delay) {
    let timerId;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timerId);
        timerId = setTimeout(function () {
            func.apply(context, args);
        }, delay);
    };
}

例子： 在这个例子中，我们将使用debounce的方法。

JavaScript

function delayFuncExec() { 
    console.log("I AM GFG "); 
} 
  
let timerId = setTimeout(delayFuncExec, 1000) 
  
console.log("Timer Id: " + timerId);

输出

Timer Id: 2
I AM GFG 

在100毫秒后，将执行delayFuncExec函数。setTimeout方法生成的整数将存储在timerId中。

throttle： throttle是一种类似于debounce的技术，但它不是延迟执行函数，而是限制函数执行的速率。当一个函数，比如鼠标移动或按键事件监听器，可能被重复调用但不需要每次都运行时，这是非常有用的。

throttle是一种技术，不管用户触发事件的次数有多少，附加的函数在给定的时间间隔内只会执行一次。throttle确保函数定期执行。

优点：

• 这降低了函数调用的频率，有助于避免性能问题和优化资源消耗。
• 这用于限制用户使用键盘或鼠标输入数据的速率，以防止错误或不良行为。

  缺点：

• 由于函数只在特定的时间间隔内调用，它可能无法立即响应。

• 如果throttle时间过长，一些事件可能会被跳过，这可能会导致丢失细节。

  语法：

function throttle(callback, delay = 1000) {
      let shouldWait = false;
      return (...args) => {
        if (shouldWait) return;
        callback(...args);
        shouldWait = true;
        setTimeout(() => {
              shouldWait = false;
        }, delay);
      };
}

示例: 在这个示例中，我们将使用throttle的方法。

JavaScript

function throttle(func, delay) { 
    let lastCall = 0; 
    return function (...args) { 
        const now = new Date().getTime(); 
        if (now - lastCall < delay) { 
            return; 
        } 
        lastCall = now; 
        func(...args); 
    }; 
} 
  
function logMessage(message) { 
    console.log(message); 
} 
  
const throttledLogMessage = throttle(logMessage, 1000); 
  
// Logs 'Hello' 
throttledLogMessage('Hello'); 
  
// Doesn't log anything 
throttledLogMessage('World'); 
  
// Logs 'Delayed' after 2 seconds 
setTimeout(() => throttledLogMessage('Delayed'), 2000);

输出

Hello
Delayed

在这个示例中，throttle函数接受两个参数：func，要进行throttle的函数，和delay，函数调用之间的最小间隔。throttle函数返回一个封装了func并执行throttle逻辑的新函数。

debounce和throttle的区别：