如何取消延迟输入事件

Question

从这个开始如何延迟.keyup((处理程序直到用户停止键入？我们已经学会了如何制造延误。但关于如何取消延迟的活动，有什么想法吗？

看看这个

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

但我需要更具扩展性的解决方案。解决方案可能是以某种方式修改delay()函数，就像这个一样

delay(fn, ms, cancelCallback)

在这里，cancelCallback将是一个取消延迟的函数。通过取消延迟，我的意思是不调用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

这是我自己想出来的。我认为解决方案非常明确。

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>

Answer 2

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

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>