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

Predator117

于 2021-01-19 18:53:01 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/Predator117/article/details/112847697

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖（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