js 防抖函数

最新推荐文章于 2024-03-19 18:23:09 发布

置顶小丑鱼20210316

最新推荐文章于 2024-03-19 18:23:09 发布

阅读量401

点赞数 5

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_38331749/article/details/115434719

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

防抖原理
一、代码示例
总结

防抖原理

示例：input元素，有一个keyup事件，用户不断敲击键盘输入，一定是触发n秒后才执行事件，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后才执行，总之，就是要等你触发完事件n秒内不再触发事件。

一、代码示例

1、html页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手写防抖</title>
  </head>
  	// 一个 input输入框
    <input type="text" id="input1" />
    // 相关js代码，写在 a.js文件
    <script src="./a.js"></script>
  </body>
</html>

2、直观代码

// 通过id获取dom对象
var input1 = document.getElementById('input1')
// 定义一个 timer 计时器变量，一定要写在外面
var timer
// 给 input 添加一个 keyup 事件
input1.addEventListener('keyup', function () {
  // 已存在 timer，清空
  if (timer) {
    clearTimeout(timer)
  }
  // 生成一个 timer
  timer = setTimeout(() => {
    // 打印输入框的值
    console.log(input1.value)
    timer = null
  }, 1000)
})

3、封装防抖函数

input1.addEventListener('keyup', debounce(function () {
  console.log(input1.value)
}, 300))

// 封装 debounce 函数
function debounce(fn, delay = 500) {
  let timer = null
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    // 使用箭头函数，为了直接获取当前的this对象
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}