uniapp 输入框防抖节流_节流防抖及其应用(搜索框和连续滚动优化)

看完本文,可以解决下面三个面试题

  1. 手写一个节流、防抖函数并讲解原理
  2. 手写一个简单搜索框,并实现搜索逻辑
  3. 手写一个滚动优化

本文配有完整的 demo 演示,可前往逐一测试,使用 netlify 部署,访问速度可能稍慢。

https://lxfriday-give-me-job-web-serve.netlify.com/

9b9584f610be9e6abfc1b67de9bc644f.png

节流防抖是一种防止函数频繁无序执行的设计思想,它的核心目的是让无序变为有序,让函数执行更符合预期目的。

防抖

防抖的原理是,只要在倒计时的范围内,新触发防抖函数就会导致计时器重置,要重新等待 wait 时长之后才能执行。

简单实现

最简单的 debounce

示例中绑定了 this,在调试工具中可以看到 this 和 event 对象

function debounce(func, wait) {
  let timeout
  return function debounced(...args) {
    const ctx = this
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(ctx, args)
    }, wait)
  }
}

需要立即执行的防抖

debounce2 with immediate

和上面不同之处在于,在定时时间之后,只要触发就会立即执行(第一种是要等待 wait 时长),然后至少在 wait 之后才能进行下次触发。

function debounce(func, wait, immediate) {
  let timeout
  r
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值