JavaScript 中的防抖和节流，它们的区别是什么，以及如何实现？

在前端开发中，防抖（Debounce）和节流（Throttle）是两种常用的优化高频率事件处理的技术。

它们能够有效减少事件处理函数的执行次数，从而提升页面性能和用户体验。

下面将详细解释这两种技术的概念、区别、实现方法以及在日常开发中的使用建议和注意事项。

一、防抖（Debounce）

概念：防抖是指在事件被触发后，等待一定的时间，如果在这段时间内没有再次触发该事件，则执行一次事件处理函数；如果在等待期间内事件再次被触发，则重新计时。

应用场景：

• 窗口调整大小（resize）：用户调整窗口大小时，频繁触发resize事件，使用防抖可以只在用户停止调整后执行一次处理逻辑。
• 输入框实时搜索：用户在输入框中输入内容时，频繁触发输入事件，使用防抖可以只在用户停止输入一段时间后才发送搜索请求。

实现：

/**
 * 防抖函数
 * @param {Function} func - 需要防抖处理的函数
 * @param {number} wait - 等待时间（毫秒）
 * @param {boolean} immediate - 是否立即执行
 * @returns {Function} - 返回防抖处理后的函数
 */
function debounce(func, wait, immediate = false) {
    let timeout; // 定义一个定时器变量

    return function(...args) {
        const context = this; // 保存当前上下文

        const later = () => {
            timeout = null; // 清空定时器
            if (!immediate) func.apply(context, args); // 如果不是立即执行，则执行函数
        };

        const callNow = immediate && !timeout; // 判断是否立即执行

        clearTimeout(timeout); // 清除之前的定时器
        timeout = setTimeout(later, wait); // 设置新的定时器

        if (c