JavaScript学习笔记（二）防抖函数

最新推荐文章于 2025-12-21 13:28:14 发布

转载最新推荐文章于 2025-12-21 13:28:14 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhoulixue/p/10592197.html

文章标签：

#javascript #ViewUI

本文深入讲解了JavaScript中防抖函数的实现原理与应用。通过一个简单的示例，演示了如何使用防抖函数来优化文本框输入事件的响应，避免高频触发导致的性能问题。文章详细解释了代码中定时器的使用，以及如何在事件触发间隔内清除并重新设置定时器，确保函数只在最后一次触发后的指定延迟时间后执行。

function debounce(func, waite) {
  let timerId = null
  return function(...args) {
    if (timerId) {
      clearTimeout(timerId)
    }
    timerId = setTimeout(() => {
      func(...args)
    }, waite)
  }
}
let txtChange = debounce(event => {
  console.log(event.target.value)
}, 500)
document.getElementById('txt').onkeyup = event => {
  txtChange(event)
}