javascript - 为接受事件的函数调用设置超时在 IE7 中不起作用

Question

我对网络开发相当陌生，我想我已经掌握了它的窍门，我遇到的唯一主要问题是跨浏览器兼容性问题。

我在网页上有一个文本区域，它将在用户完成输入后调用一个函数。为了做到这一点，我使用 jQuery 和 setTimeout 在调用该函数之前等待一会儿。这可确保每次按键后不会调用该函数。我不希望在每次按键后调用它，因为该函数会向 servlet 发送请求，servlet 会进行一些处理并返回。

该代码在 Chrome 上运行良好(我使用 Chrome 对其进行调试)，但在 IE7 上不起作用。这是:

var timer = null;
$("#scriptInput").keypress(function() {
    clearTimeout(timer);
    var thisEvent = window.event;
    timer = setTimeout(function() {validateScript(thisEvent);}, 500);           
});


function validateScript(evt) {
  var code = (evt.keyCode) ? evt.keyCode : evt.which;

  //check which key was pressed...
  //don't need to send a request on key presses of CAPSLOCK, SHIFT, and ARROW keys
  if(code != 20 && code != 16 && code != 37 && code != 38 && code != 39 && code !=40){ 
    sendRequest(2);
  }
}

如您所见，我已经多次尝试实现与 IE7 的兼容性，但没有成功:\

它必须至少与 IE7 兼容，因为它将被许多使用 IE7 并且没有升级权限的机器使用。

如果您需要更多信息，请告诉我!谢谢!

附注“scriptInput”是受影响的文本区域的 ID。

Answer 1

var thisEvent = window.event; 不跨浏览器兼容 - 并非所有浏览器都使用全局 event 对象，而是使用函数参数。

jQuery 总是为您提供一个事件对象作为函数参数，因此只需删除上面的赋值并更改您的代码，如下所示:

$("#scriptInput").keypress(function(thisEvent) {
    ...
});

jQuery 还将按键的各种属性标准化为 e.which ，这样您就可以摆脱 var code = (evt.keyCode) ? evt.keyCode : evt.which; 并且始终使用 evt.which 。

<小时/>

您还可以进一步改进/缩短整个过程。如果添加另一个库没问题，我会使用 _.debounce从 Underscore.js 进行计时:

$("#scriptInput").keypress(_.debounce(validateScript, 500));

除了 Underscore.js，您还可以使用 jQuery plugin providing that functionality .

如果添加额外的第三方代码不是一个选项，我会将计时器存储在元素上而不是(可能是全局)变量上:

$("#scriptInput").keypress(function(e) {
    var $this = $(this);
    window.clearTimeout($this.data('timer'));
    $this.data('timer', window.setTimeout(function() {
        validateScript(e)
    }, 500));
});