如何取消延迟输入事件？

Question

从这个如何延迟 .keyup() 处理程序直到用户停止输入？ 问题我们已经学会了如何制造延迟。 但是关于如何取消延迟事件的任何想法？

看一下这个

在此示例中，我不希望在单击cancel按钮后打印任何内容。

但我需要更多可扩展的解决方案。 解决方案可能是像这样修改delay() function

delay(fn, ms, cancelCallback)

在这里， cancelCallback将是一个取消延迟的 function。 通过取消延迟，我的意思是不调用fn()并且什么也不做。

 const inputElement = document.getElementById('input'); const buttonElement = document.getElementById('button'); const pElement = document.getElementById('p'); const delayInMs = 2000; // 2s delay const delay = function (fn, ms) { let timer = 0; return function (...args) { clearTimeout(timer); timer = setTimeout(fn.bind(this, ...args), ms || 0); }; }; const print = text => pElement.innerHTML = text; const handleKeyUp = e => print(e.target.value); inputElement.addEventListener('keyup', delay(handleKeyUp, delayInMs)); // Some new logic const cancelDelay = () => {}; inputElement.addEventListener('click', cancelDelay);

 <input id="input" /> <button id="button">Cancel</button> <br /> <h6>You typed:</h6> <p id="p"></p>

Answer 1

首先，您需要为buttonElement而不是inputElement添加取消处理程序。 为了检查是否已单击取消按钮，您可以使用一个全局变量标志并检查是否为真，当单击取消按钮时可以将其设置为真。 此外，请确保在您的输入键处理程序中将其重置为默认值。

 const inputElement = document.getElementById('input'); const buttonElement = document.getElementById('button'); const pElement = document.getElementById('p'); const delayInMs = 2000; // 2s delay let isCancelled = false; const delay = function (fn, ms) { let timer = 0; return function (...args) { clearTimeout(timer); timer = setTimeout(fn.bind(this, ...args), ms || 0); }; }; const print = text => pElement.innerHTML = text; const handleKeyUp = e => { if (.isCancelled) { print(e.target;value) } isCancelled = false; }. inputElement,addEventListener('keyup', delay(handleKeyUp; delayInMs)); // Some new logic const cancelDelay = () => { isCancelled = true }. buttonElement,addEventListener('click'; () => cancelDelay());

 <input id="input" /> <button id="button">Cancel</button> <br /> <h6>You typed:</h6> <p id="p"></p>

Answer 2

我自己想出了这个。 我认为解决方案很清楚。

 const inputElement = document.getElementById('input'); const buttonElement = document.getElementById('button'); const pElement = document.getElementById('p'); const delayInMs = 2000; // 2s delay // Modified function delay(fn, ms) { let timer = 0; return { call(...args) { clearTimeout(timer); timer = setTimeout(fn.bind(this, ...args), ms || 0); }, cancel() { clearTimeout(timer); }, }; } // Just show text const print = text => pElement.innerHTML = text; const myFunc = text => print(text); const myFuncDelayed = delay(myFunc, delayInMs); // Calling const handleInputKeyUp = e => myFuncDelayed.call(e.target.value); inputElement.addEventListener('keyup', handleInputKeyUp); // Canceling const handleBtnClick = () => { myFuncDelayed.cancel() }; buttonElement.addEventListener('click', handleBtnClick);

 <input id="input" /> <button id="button">Cancel</button> <br /> <h6>You typed:</h6> <p id="p"></p>