防抖(debounce)和截留(throttle)

先来说两个例子:

  1. 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯;但是,你是个没耐心的人,你最多只会等待电梯停留一分钟;在这一分钟内,你会开门让别人进来,但是过了一分钟之后,你就会关门,让电梯上楼。
  2. 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯;如果在电梯门关闭之前,又有人来了,你会继续开门;这样一直进行下去,你可能需要等待几分钟,最终没人进电梯了,才会关闭电梯门,然后上楼。

前言

开发中你可能会遇到下面的情况:

  • 监听Window对象的resizescroll事件
  • 拖拽时监听mousemove
  • 文字输入时,对输入字符串进行处理,比如要把markdwon转换成html
  • 监听文件变化,重启服务

第一种和第三种情况,事件短时间内被频繁出发,如果在事件中有大量的计算,频繁操作DOM,资源加载等重行为,可能会导致UI卡顿,严重点甚至让浏览器挂掉。对于第四种情况,有的开发者保存编辑好的文件喜欢按多次Ctrl+S,若是快速的重启服务还能Hold住,但是要是重启一个应用,就可能多次不必要的重启。

针对上面这一系列的需求,于是有了debouncethrottle两种解决办法。

函数节流

函数按照一个周期执行,例如给window绑定一个resize事件之后,只要窗口改变大小改变就打印1,如果不采用函数节流,当我们将窗口调节的时候发现控制台一直打印1,但是使用了函数节流后我们会发现调节的过程中,每隔一段时间才打印1

一个函数节流的简单实现:

使用的方法也很简单:

看看React中怎么使用的,下面监听窗口的resize和输入框的onChange事件:

函数去抖

当事件触发之后,必须等待某一个时间(N)之后,回调函数才会执行,假若再等待的时间内,事件又触发了则重新再等待时间N,直到事件N内事件不被触发,那么最后一次触发过了事件N后,执行函数。

还是窗口resize,如果一直改变窗口大小,则不会打印1,只有停止改变窗口大小并等待一段时间后,才会打印1。

函数去抖简单实现:

应用场景,监听文件变化,重启应用:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复