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

本文深入探讨前端开发中的两种重要优化技术——防抖(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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值