胖蔡说技术
随便扯扯

LeetCode题目:函数防抖

題目描述

请你编写一个函数,接收参数为另一个函数和一个以毫秒为单位的时间 t ,并返回该函数的 函数防抖 后的结果。

函数防抖 方法是一个函数,它的执行被延迟了 t 毫秒,如果在这个时间窗口内再次调用它,它的执行将被取消。你编写的防抖函数也应该接收传递的参数。

例如,假设 t = 50ms ,函数分别在 30ms 、 60ms 和 100ms 时调用。前两个函数调用将被取消,第三个函数调用将在 150ms 执行。如果改为 t = 35ms ,则第一个调用将被取消,第二个调用将在 95ms 执行,第三个调用将在 135ms 执行。

Debounce Schematic

上图展示了了防抖函数是如何转换事件的。其中,每个矩形表示 100ms,反弹时间为 400ms。每种颜色代表一组不同的输入。

请在不使用 lodash 的 _.debounce() 函数的前提下解决该问题。

实现

type F = (...args: number[]) => void

function debounce(fn: F, t: number): F {
    let isRunned = false
    let task: any = null
    const a = (...args) => {
       task =  setTimeout(()=>{
            fn(...args)
            isRunned = true
        }, t)
    }

    return function(...args) {
        if(task === null || isRunned) {
            // 首次进入,启动任务
             isRunned = false
            a(...args)
        }else if(!isRunned){
            // 未执行完
            clearTimeout(task)
            a(...args)
        }
    }
};

/**
 * const log = debounce(console.log, 100);
 * log('Hello'); // cancelled
 * log('Hello'); // cancelled
 * log('Hello'); // Logged at t=100ms
 */

如上,通过clearTimeout辅助实现函数防抖。

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » LeetCode题目:函数防抖
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏