函数节流

2021-05-02 22:22:34 小于 1 分钟

概述：限制一个函数再一定时间内只能执行一次；

var throttle = function(func, delay) {
    // 初始化定时器的id；
    var timer = null
    // 定义开关属性
    var key = true
    return function() {
        // 第一次立即调用
        if (key) {
            func()
            key = false
        } else if (!timer) {
            // 若上次的定时器执行完毕则立即调用，否则不调用；
            timer = setTimeout(function() {
                func()
                timer = null
            }, delay)
        }
    }
}

// 要进行处理的函数； 
function handle() {
    console.log(Math.random())
}

window.addEventListener('mousemove', throttle(handle, 1000))

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

// 非立即调用
function throttle (f, wait) {
    let timer
    return (...args) => {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            f(...args)
            timer = null
        }, wait)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

使用场景：

1、懒加载、滚动加载、加载更多、监听滚动条位置；

2、百度搜索框、搜索联想功能；

3、防止高频点击提交、防止表单重复提交；

函数节流

详情