输入带有超时的 onKeyUp 事件

Question

I am trying to create a simple debounce for text input.我正在尝试为文本输入创建一个简单的去抖动。 Following is the code:以下是代码：

<body>
    <input id="myInput" type="text" />
</body>
<script>
    function save(data) {
        console.log('saved!!', myInput.value);
    }

    //function process(e, callback, delay) { signature is changed like this, when we call onKeyUp
    function process(callback, delay) { //signature is changed to this, when we call 'process' directly
        //console.log('e', e, 'callback', callback, 'delay', delay);
        let timer;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(callback, delay);
        }
    }

    function onKeyUp(e) {
        //console.log('onKeyUp')
        process(e, save, 1000)
    }

    //const inp = document.querySelector("#txtInput");
    const inp = document.getElementById("myInput");
    inp.addEventListener(
        'keyup',
        //process(save, 1000) //works
        onKeyUp //-- > does not work
    );
</script>

If I simply call process function on keyup event, it works as expected.如果我只是在 keyup 事件上调用process function，它会按预期工作。

However, I also want to pass e.target.value, and hence I want to event object as well.但是，我也想传递 e.target.value，因此我也想事件 object。 Hence, to achieve that when I tried calling another function called onKeyUp , which captures event object and when I pass it to process(e, save, 1000) the setTimeout isn't getting called and hence save function isn't getting triggered.因此，为了实现这一点，当我尝试调用另一个名为onKeyUp的 function 时，它捕获事件 object 并且当我将它传递给process(e, save, 1000)时，setTimeout 没有被调用，因此 save function 没有被触发。

My question is what is the difference when we call process funtion directly on event listener and when we call another function and pass event object to it.我的问题是，当我们直接在事件侦听器上调用process功能与调用另一个 function 并将事件 object 传递给它时有什么区别。

Answer 1

The process(save, 1000) works because it return a function (the anonymous function returned in process() ) which passes to inp.addEventListener as the second parameter process(save, 1000)之所以有效，是因为它返回一个 function（ process()中返回的匿名 function）作为第二个参数传递给inp.addEventListener

inp.addEventListener(
    'keyup',
    process(save, 1000)
);
// equals to 
const callback = process(save, 1000); //get the anonymous function returned in `process()`
inp.addEventListener(
    'keyup',
    callback
); //callback will be called like callback() when keyup

but when change it to onKeyup , the anonymous function will not be called, so the setTimeout won't work, so does the save function但改成onKeyup时，匿名 function 不会被调用，所以setTimeout不起作用， save function 也不起作用

inp.addEventListener(
    'keyup',
    onKeyup
); // onKeyup will be called like onKeyup() 
function onKeyUp(e) {
    process(e, save, 1000) // process called
}
function process(e, callback, delay) { 
    let timer;
    return function () { // not called, it returns as a function only
        clearTimeout(timer);
        timer = setTimeout(callback, delay);
    }
}

To fix it.要解决这个问题。 you can do你可以做

function onKeyUp(e) {
    process(e, save, 1000)(); 
}
let timer; //assign the `timer` as a global variable
function process(e, callback, delay) { 
    return function () {
        clearTimeout(timer);
        timer = setTimeout(callback, delay);
    }
}

More further, you don't need onKeyup if you just want to get the event parameter.In the first code, the anonymous function was called when keyup, it accepted the event parameter already.更进一步，如果你只是想获取event参数，你不需要onKeyup 。在第一个代码中，匿名function在keyup时被调用，它已经接受了事件参数。

function process(callback, delay) { 
    let timer;
    return function (e) { // you can get `e` here
        clearTimeout(timer);
        timer = setTimeout(callback, delay);
    }
}

输入带有超时的 onKeyUp 事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-26 07:42:53

输入带有超时的 onKeyUp 事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-26 07:42:53

解决方案1
1 已采纳 2022-05-26 07:42:53