【问题标题】：How do I cancel delayed input event?如何取消延迟输入事件？
【发布时间】：2021-04-20 00:32:19
【问题描述】：

从这个How to delay the .keyup() handler until the user stops typing? 问题中，我们了解了如何制造延迟。但是关于如何取消延迟事件的任何想法？

看看这个

在此示例中，我不希望在单击 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>

【问题讨论】：

标签： javascript html css timer delay

【解决方案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>

【讨论】：

非常好的解决方案，但如果你有 1000 次延迟，它就会变得混乱。看看我的，我想出了这个

【解决方案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>

【讨论】：