前端常见面试题：防抖和节流

最新推荐文章于 2025-06-06 09:33:07 发布

原创

最新推荐文章于 2025-06-06 09:33:07 发布 · 547 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

本文深入探讨前端开发中的两种重要优化技术——防抖(debounce)和节流(throttle)。防抖在用户输入结束或暂停时才触发事件，如输入验证提示。节流则限制事件处理的频率，避免过度执行，如搜索联想和滚动加载。通过实例，阐述了这两种技术在实际场景中的应用和实现机制。

防抖（debounce）

监听一个输入框，文字变化后触发change事件
使用keyup事件，则会频繁触发change事件

举例：公交司机会等所有乘客上车后才关车门，而不是上一个开关门一次。

防抖：用户在输入结束或暂停的时候，才会触发change事件。
（注册账号填写用户名、密码时的提示，调整窗口大小完成后，才计算窗口大小，防止重复渲染）

let input1 = document.getElementById('input1');

function debounce(fn, delay = 100) {
   
   //delay默认为100ms
	//timer是闭包中的
    let timer = null;
    return function () {
   
   
        //timer有值时，重置null（在delay时间之内连续输入时）
        if (timer) {
   
   
            clearTimeout