混淆addEventListener

Question

我编写了一个去反跳函数，并希望使用该函数显示输入。

    let btn = document.querySelector('.firstScreen')
    let input = document.querySelector('input')

    function debounce(fn, time) {
        let timer = null
        return function(...args){
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                fn()
            }, time)
        }
    }

    function display(){
        btn.children[1].innerHTML=input.value
    }

当我这样写的时候，它不工作：

  document.addEventListener('keyup',function(){
        debounce(display, 2000)
    })

但是像这样工作：

    document.addEventListener('keyup',debounce(display, 2000))

为什么？

Answer 1

您可以根据需要从debounce(display, 2000)返回函数。该函数不能作为函数调用，因此第一个示例不使用返回的函数，而只是创建您应该使用的函数

你可以这样做

document.addEventListener('keyup',function(){ return debounce(display, 2000) }) 

当你可以做你已经确定的工作时，这是对代码的浪费。

document.addEventListener('keyup',debounce(display, 2000))