JS中的防抖和节流

防抖(debounce)

在一定时间内，只执行最后一次任务。

在事件被触发的 N 秒后再执行任务（回调函数），如果在这 N 秒内又触发事件，则重新计时：

• 当事件触发时，相应的响应处理函数不会立即被触发，而是等待一定的时间；
• 当事件密集触发时，函数的触发会被频繁的推迟；
• 只有等待了一段时间也没有事件触发，才会真正执行响应处理函数。

防抖的应用场景：

• 手机号、邮箱输入检测
• 搜索框搜索输入（只需最后一次输入完后，再发送 Ajax 请求，减少请求次数，节约请求资源）
• 窗口大小 resize（只需窗口调整完成后，计算窗口大小，防止重复渲染）
• 滚动事件 scroll（只需执行触发的最后一次滚动事件的处理程序）
• 文本输入的验证（连续输入文字后发送 Ajax 请求进行验证，（停止输入后）验证一次就好

手写实现防抖：

        var btn=document.querySelector('button')
        var ipt=document.querySelector('input')
        btn.addEventListener('click',debounce(getValue,2000))
        function getValue(){
            var val=ipt.value
            console.log(val);
        }
        function debounce(fn,time){
            let t=null
            return function(){
                if(t){
                    clearTimeout(t)
                }
                var firstClick=!t
                if(firstClick){
                    fn.apply(this,arguments)
                }
                t=setTimeout(() => {
                    t=null
                }, time);
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

节流

在一定时间内，同一个任务只会执行一次。

在一定时间内，只能触发一次响应函数，如果事件频繁触发，只有一次生效。

节流的应用场景：

• DOM 元素的拖拽功能实现（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 计算鼠标移动的距离（mousemove）
• 搜索联想（keyup）
• 滚动事件 scroll，（只要页面滚动就会间隔一段时间判断一次）

        var btn=document.querySelector('button')
        var ipt=document.querySelector('input')
        btn.addEventListener('click',throttle(getValue,2000))
        function getValue(){
            var val=ipt.value
            console.log(val);
        }
        function throttle(fn,time){
            var begin=0
            return function(){
                var date=new Date().getTime()
                if(date-begin>time){
                    fn.apply(this,arguments)
                    begin=date
                }
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17