JS防抖和节流

# 一、防抖debounce

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

/**
 * 将短时间内(delay),频繁多次触发方法(fn),合并为一次触发
 */
function debounce(fn, delay) {
  let timer
  return function() {
    let args = arguments
    let that = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      fn.apply(that, args)
    }, delay)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 防抖应用场景

搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
表单验证
按钮提交事件。
浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。

# 二、节流throttle

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

时间戳和

/**
 *  用定时器实现
 */
function throttle(fn, delay) {
  let timer
  return function() {
    let args = arguments
    let that = this
    if (timer) {
      return
    }
    timer = setTimeout(function() {
      fn.apply(that, args)
      clearTimeout(timer)
      timer = null
    }, delay)
  }
}

/**
 *  用时间戳实现
 */

function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 节流应用场景

按钮点击事件
拖拽事件
onScoll
计算鼠标移动的距离(mousemove)

测试一下

function test(text) {
  console.log(text)
}

let debounceFunc = debounce(test, 500)
let throttleFunc = throttle(test, 500)

let counter = 1

setInterval(function() {
  console.log(111)
  counter++
  if (counter < 20) {
    console.log(222)
    debounceFunc('hello debounce')
    throttleFunc('hello throttle')
  }
}, 200)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#JavaScript

上次更新: 2023/04/05, 09:41:10

← Javascript函数参数按值传递传递手写JS常用方法→