javaScript中的防抖和节流

防抖和节流本质上是一种优化高频率执行代码的一种方法。

1，防抖

        当频繁触发某个事件时，防抖可以确保事件处理函数只执行一次，且在事件触发后的某个时间间隔内不再触发。常用于如输入框实时搜索、窗口大小调整等场景，以减少不必要的计算或请求。

<script>
    //创建一个防抖函数
    function debounce(func, wait) {
        let timeout;
        return function debounced() {
            const context = this;
            const args = arguments;
            clearTimeout(timeout);
            //timeout = setTimeout(() => func.apply(context, args), wait);
            timeout=setTimeout(function(){
                func.apply(context,args)
            },wait)
        };
    }

    // 使用
    function doSomething() {
        console.log('防抖.....');
    }
    // 创建一个防抖后的函数，延迟2秒执行
    const debouncedDoSomething = debounce(doSomething, 2000);
    // 模拟频繁触发事件
    window.addEventListener('resize', debouncedDoSomething);
    // 当窗口大小调整时，doSomething函数将在最后一次调整后的500毫秒内执行一次
</script>

        分析:  debounce 函数接受两个参数：func 是需要防抖的函数，wait 是等待的时间（以秒为单位）。debounce 函数返回一个新的函数，这个新函数在被频繁调用时会取消之前的定时器并重新设置，从而确保 func 函数只会在最后一次调用后的 wait 后执行。

  doSomething 函数被防抖处理，并绑定到窗口的 resize 事件上。这样无论窗口大小如何频繁地调整，doSomething 函数只会在最后一次调整后的2秒内执行一次。

2，节流

        当频繁触发某个事件时，节流可以确保事件处理函数在一定的时间间隔内只执行一次。这意味着事件处理函数的执行频率是受限的。常用于如滚动事件、窗口resize等场景，以优化性能。

<script>    
    //创建节流函数
    function throttle(func, limit) {
        let inThrottle;
        return function throttled() {
            const context = this;
            const args = arguments;
            if (!inThrottle) {
                func.apply(context, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        };
    }

    // 使用
    function updatePosition() {
        console.log('节流...');
    }
    // 创建一个节流后的函数，每2秒最多执行一次
    const throttledUpdatePosition = throttle(updatePosition, 2000);

    // 模拟频繁触发事件，如鼠标移动
    window.addEventListener('mousemove', throttledUpdatePosition);
    // 当鼠标移动时，updatePosition函数每2秒最多执行一次
</script>

   throttle 函数接受两个参数：func 是需要节流的函数，limit 是两次函数调用之间的最小时间间隔（以秒为单位）。throttle 函数返回一个新的函数，这个新函数在被频繁调用时，会检查是否已经过了指定的时间间隔。如果过了时间间隔，则执行函数并重置时间间隔；如果没过时间间隔，则忽略这次调用。

  updatePosition 函数被节流处理，并绑定到窗口的 mousemove 事件上。这样无论鼠标如何频繁地移动，updatePosition 函数每2秒最多只会执行一次。这有助于减少不必要的计算或DOM操作，提高性能。