ggggxc学习笔记----防抖、节流_%ggg%ggg%ggcczx-CSDN博客

本文链接：https://blog.csdn.net/gaoxiaochan/article/details/119741129

本文详细介绍了JavaScript中的防抖和节流技术，这两种技术常用于控制高频事件的触发。防抖确保在一段时间内只执行最后一次事件处理函数，而节流则保证在设定的时间间隔内只调用一次事件处理函数。通过示例代码，展示了如何实现防抖和节流函数，并解释了它们在实际应用中的作用。

摘要由CSDN通过智能技术生成

一、防抖：

介绍：当事件被持续触发时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。直到周期结束，执行动作。其实只要执行最后一次事件处理函数就完全OK了。

代码：

 // 防抖：高频触发事件，只要执行最后一次事件处理函数
    const input = document.querySelector('input');

    input.oninput = debounce(function () {
      console.log(this.value);
    }, 500)

    // 封装防抖函数
    function debounce(fn, delay) {
      let timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          // 业务代码,改变内部this指向
          fn.call(this)
        }, delay);
      }
    }

二、节流：

介绍：当事件被持续触发时，保证一定时间段内只调用一次事件处理函数。是控制高频事件的触发次数。

代码：

 // 节流：控制高频事件的触发次数
    window.onscroll = throttle(function () {
      console.log('页面滚动');
    }, 500);

    // 封住节流代码
    function throttle(fn, delay) {
      let flag = true;
      return function () {
        if (flag) {
          setTimeout(() => {
            fn.call(this)
            flag = true
          }, delay)
        }
        flag = false
      }
    }