JS实现防抖-学习记录

防抖：防抖是指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求）

看了网上许多其他代码，感觉有些复杂。

实现代码如下：

// 生成防抖函数
function creatDebounced(callback, delay){
    let timer
    return function (){
        if (timer){ clearTimeout(timer) }

        timer = setTimeout(()=>{
            callback.apply(this, arguments)
        },delay)
    }
}

// 测试
let test = creatDebounced(function (i){
    console.log("函数防抖测试",i)
}, 1000)

// 此处test 即可实现防抖的功能
test("1")
test("2")

测试过后虽然实现了一个基础的防抖功能。

然而在实际业务情况中，会出现另一种情况。

• 假如input 是个搜索框，输入字符"A"后，等待一段时间，前端向后端发起请求，查找联想的搜索词，假设该网络请求为"a"
• 这时，请求a的响应还没有回来，（可能后端在处理，也可能网络堵塞）
• 这种情况下，在搜索框中又追加字符"B"，也就是说现在的字符是"AB"，过了一段时间，前端向后端发起请求，查找联想的搜索词，假设网络请求为"ab"
• 这时，请求"ab"的响应返回，又过了一会，请求"a"的响应返回

也就是说，我们最终拿到的其实是 旧数据 

怎么解决呢？

可以为每次请求设置一个表示id

代码改动如下：

// 生成防抖函数
function creatDebounced(callback, delay){
    let timer
    // 用于标识请求
    let id = 0
    return function (){
        if (timer){ clearTimeout(timer) }

        timer = setTimeout(()=>{
            id++
            callback.apply(this, arguments)
        },delay)
    }
}

// 测试
let test = creatDebounced(function (i){
    console.log("函数防抖测试",i)
//     假定此处为一个异步请求 await ...code
//     此处在发送的异步请求中，请求时id
//     收到响应后，判断此响应是否是最新的
    if(idNow !== id){
        // 此结果作废
    }

}, 1000)

// 此处test 即可实现防抖的功能
test("1")
test("2")

哈哈哈整了个伪代码

有问题的话希望评论指正