JavaScript自定义节流函数返回[Function]且未触发限流问题求助

核心错误原因 #

• throttleDisplay的作用是接收一个原始函数，返回一个经过节流包装的新函数。你在循环中每次都重新调用throttleDisplay，相当于每次都生成了全新的节流包装函数，各自维护独立的flag变量，完全不会共享限流状态，所以6000ms的限流规则无法生效。
• 你给throttleDisplay传的第一个参数是display("Hi")，这是直接执行了display函数，拿到的返回值是字符串"Hi"，并非函数类型。同时你调用throttleDisplay之后拿到的是它返回的匿名函数，没有执行这个匿名函数就直接打印，所以输出永远是[Function]。
• 你当前写的节流包装函数内部执行func.apply时没有接收返回值，也没有把返回值向外抛出，就算调用逻辑正确也拿不到display返回的Hi。

修复后可运行代码 #

const display = (msg) => {
    return msg;
}

const throttleDisplay = (func, limit) => {
    let flag = true;
    return function() {
        if(flag) {
            // 接收原始函数执行结果并向外返回
            const res = func.apply(this, arguments);
            flag = false;
            setTimeout(() => flag = true, limit);
            return res;
        }
    }
}

// 提前生成唯一的节流包装函数，共享限流状态
const throttledFn = throttleDisplay(display, 6000);

for(let i=1; i<=5; i++) {
    setTimeout(() => {
        // 调用包装后的节流函数，传入参数
        const result = throttledFn("Hi"); 
        console.log(result)
    }, i*1000);
}

运行效果说明 #

修复后代码只会在第1秒输出一次Hi，剩下4次调用因为处于6秒限流期内flag为false，没有返回值，输出undefined，符合限流预期。

内容的提问来源于stack exchange，提问作者myTest532 myTest532