单讲 防抖 debounce

吐槽君 分类:javascript

看了也不亏不是么?我滴朋友!!!

实际工作场景:

在写用户注册页面的时候,用户名框输入名称的同时去服务器校验名称是否重复,但发现之前的代码竟然都没做限制,输入一次发一次请求。简直忍不了!!!

函数防抖和节流,都是控制事件触发频率的方法。应用场景有很多,输入框持续输入,将输入内容远程校验、多次触发点击事件、onScroll等等。

防抖是个啥?

引用司徒正美大哥的话:函数防抖debounce。其概念其实是从机械开关和继电器的“去弹跳”(debounce)衍生 出来的,基本思路就是把多个信号合并为一个信号。

单反也有相似的概念,在拍照的时候手如果拿不稳晃的时候拍照一般手机是拍不出好照片的,因此智能手机是在你按一下时连续拍许多张, 能过合成手段,生成一张。翻译成JS就是,事件内的N个动作会变忽略,只有事件后由程序触发的动作只是有效。

实现函数防抖(16-7)

下面我们

  • 监听一个输入框的,文字变化后触发change事件
  • 令直接用keyup事件,则会频发触发change事件
  • 防抖:用户输入结束或暂停时,才会触发change事件

image.png

主要是 timer 的逻辑 和 debounce 的清空

image.png

回复

我来回复
  • 暂无回复内容