JavaScript 基础 - 防抖和节流

最新推荐文章于 2023-05-22 10:21:47 发布

原创最新推荐文章于 2023-05-22 10:21:47 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文详细介绍了JavaScript中的防抖和节流技术，这两种技术常用于优化高频事件处理，提高页面性能。防抖确保在一段时间无触发后才执行函数，而节流则限制函数在特定时间间隔内执行一次。通过示例代码展示了如何实现防抖和节流函数，并应用于按钮点击事件中。

1. 防抖

*防抖
在高频(高频率触发事件) 后函数(方法)只执行一次
如果n秒内高频事件再次被触发，则重新计算时间

实现方法: 每一次触发事件设置一个延迟定时器

function FangDou () {
// 创建一个timeout 用于储存定时器id
      let timeout = null; 
      return function () {
        // 每次触发 清楚掉原有的定时器
        clearTimeout(timeout);
        // 创建一个新的 setTimeout 可以保证短时间内触发一次
        timeout = setTimeout(() => {
          alert("你好呀")
        }, 1000);
      }
    }
// 获取防抖函数
let fangd = FangDou ()
document.querySelector("button").onclick = fangd

2. 节流

*节流:
高频事件触发,在n秒内只执行一次，所以节流稀疏函数的执行频率

实现方法:每一次触发事件，如果当前函数已经执行直接退出

function JieLiu () {
      let flag = true; // 节流阀
      return function () {
        // 节流阀开启 函数执行
        if (!flag) return // 或者节流阀关闭 退出函数
        if (flag) flag = false // 进入执行函数 节流阀关闭
        setTimeout(() => {
          flag = true; //初始化后执行结束
          console.log("节流执行");
        }, 1000);
      }
    }

// 获取节流函数
let jiel = JieLiu()
document.querySelector("button").onclick = jiel