Question

我正在制作用户事件登录的网页。为了测试这个功能，我创建了一个带有teaxtarea和文本输入的小型独立网页。记录的事件是在input元素上执行的事件。

我想阻止相同的事件文本连续多次显示，但我似乎无法阻止它们出现！

我还想在没有其他事件发生0.5秒后在单独的事件组中添加一行，但是这条线似乎出现在每个事件触发器上，即使我使用带有超时ID的clearTimeout。

基本上：我不想重复任何一行。如果最后一行是分隔线，则它不能再添加另一行。然而，它并没有发挥作用。

这是我的代码：

的JavaScript

var timerID = 0;

function addSeparateLine()
{
  document.getElementById('listeEvenements').value += "--------------------\n";
}

function show(newEventText)
{
  var eventListField = document.getElementById('listeEvenements');
  var eventList = [];

  if (eventListField.value.length > 0)
  {
    eventList = eventListField.value.split("\n");
  }

  var eventCounter = eventList.length;
  if (eventList[eventCounter - 2] == newEventText)
  {
    clearTimeout(timerID);
    newEventText = "";
  }

  timerID = setTimeout(addSeparateLine, 500);

  if (newEventText !== "")
  {
    eventListField.value += newEventText + "\n";
  }

  return true;
}

HTML

<fieldset id="conteneurLogEvenements">
  <legend>Events called from HTML attribute</legend>
  <textarea id="listeEvenements" rows="25"></textarea>
  <input id="controleEcoute" type="text" onBlur="show('Blur');" onchange="show('Change');" onclick="show('Click');" onfocus="show('Focus');" onMousedown="show('MouseDown');" onMousemove="show('MouseMove');" onMouseover="show('MouseOver');" onkeydown="show('KeyDown');"
  onkeypress="show('KeyPress');" onkeyup="show('KeyUp');" />
</fieldset>

http://jsfiddle.net/z6kb4/2/

Answer 1

听起来你想要的是在500毫秒不活动后打印的一行，但你的代码目前所说的是＆＃34;在任何动作后500毫秒打印一行，除非它被取消＆＃34;。通过更贴近预期目标构建代码，您可以获得更好的结果。

具体而言，不是每次事件发生时都安排新的超时，而是在第一个事件发生时启动一个循环，检查自收到的最新事件以来经过的时间，然后打印一个当经过的时间超过所需的阈值（500毫秒）时。类似的东西：

function addSeparateLine() {
    var elapsed = new Date().getTime() - lastEventTime;
    if (elapsed >= 500) {
        document.getElementById('listeEvenements').value += "--------------------\n";
        clearInterval(timerID);
        timerID = -1;
    }
}

...然后你安排如下：

if(newEventText !== "") {
    lastEventTime = new Date().getTime();
    eventListField.value += newEventText+"\n";
    if (timerID == -1) {
        timerID = setInterval(addSeparateLine,100);
    }
}

这里的工作示例：http://jsfiddle.net/z6kb4/4/

Answer 2

因为您实际上并没有以任何方式停止show功能。 clearTimeout仅适用于分隔符添加。我有updated your fiddle。你需要用

包装你的函数

if (+new Date() - lastfire < 500) return;

和

lastfire = +new Date();

（在最后一次回归之前 - 见更新的小提琴）。另外，请确保将全局定义var lastfire = -1;放在最上方。

setTimeout立即/清除时自行执行

的JavaScript

HTML

2 个答案: