clearTimeout异常咨询：点击/单次按键正常，按住按键失效原因

问题场景 #

以下代码通过链接调用函数时运行正常，单次按下输入框按键也能正常工作，但当用户按住按键不放时，程序会出现异常（输出无法正常停止）：

JavaScript代码 #

function show() {
  s = new Date();
  M = setTimeout(function() {
    document.getElementById('output').innerHTML = s.getSeconds() + '.' + s.getMilliseconds();
    show();
  }, 150);
}

function stopshow() {
  clearTimeout(M);
  document.getElementById('output').innerHTML = 'all stopped!';
}

HTML代码 #

<input type="search" name="sin" onkeypress="show();" onkeyup="stopshow();this.value='';" />

<a href="" onclick="show();return false;">show</a> /
<a href="" onclick="stopshow();return false;">not show</a>
<div id="output"></div>

异常原因 #

• 当按住按键不放时，浏览器会持续触发keypress事件（系统默认的按键重复输入机制），每一次keypress都会调用show()函数，创建一个新的定时器。
• 全局变量M会被每次新生成的定时器ID覆盖，导致之前创建的定时器失去引用标识，无法被stopshow()里的clearTimeout(M)清除。
• 松开按键触发stopshow()时，只能清除最后一个被赋值给M的定时器，之前遗留的定时器会继续递归调用show()，导致输出无法停止，表现为程序异常。

内容的提问来源于stack exchange，提问作者Yamile