javascript - IE8 event.currentTarget 为空或不是对象

Question

我的 Javascript 与 IE8 不兼容，我不确定如何解决它。我收到一个错误“currentTarget 为 null 或不是一个对象”，它出现在这段代码中:

(function() {
  var basicTemplate, _timer, _url;
  _timer = null;
  _url = "/search";
  $(document).ready(function() {
    var search, searchCallback, searchFailure;
    $('[data-does=typeahead-rep-search]').on('keyup', function(e) {
      clearTimeout(_timer);
      return _timer = setTimeout(search, 300, e);
    });
    search = function(e) {
      var $query, division, request, target, _data;
      $query = $(e.currentTarget);
      _data = {};
      if (_data.q.length > 2) {
        return request = $.ajax(_url, {
          data: _data,
          success: searchCallback,
          error: searchFailure
        });
      } else {
        return $('#search-results').html("");
      }
    };
    searchCallback = function(data, status, jqXhr) {
      return $('#search-results').html(basicTemplate(data));
    };
    return searchFailure = function(jqXhr, status, errorThrown) {
      console.log('an error has occurred while attempting to search');
      return $('#search-results').html("");
    };
  });

}).call(this);

有谁知道我如何重新编码这段代码以使其在 IE 中正常运行？

谢谢!

Answer 1

我发现了问题。问题是这一行:

setTimeout(search, 300, e);

最简单的修复方法是:

setTimeout((function(e) { return function() { search(e) }; })(e), 300);

我将它包裹在一个闭包中以避免范围界定问题。

来自 setTimeout 的文档:

Note that passing additional parameters to the function in the first syntax does not work in Internet Explorer < 9. If you want to enable this functionality on that browser, you must use a compatibility code (see the Callback arguments paragraph).

我只是从文档中复制所有内容，作为引用。

If you need to pass an argument to your callback function, but need it to work in Internet Explorer, which doesn't support sending additional parameters (neither with setTimeout() or setInterval()) you can include this IE-specific compatibility code which will enable the HTML5 standard parameters passage functionality in that browser for both timers just by inserting it at the beginning of your scripts.

/*\
|*|
|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
|*|  callback functions of JavaScript timers (HTML5 standard syntax).
|*|
|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
|*|
|*|  Syntax:
|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
|*|  var timeoutID = window.setTimeout(code, delay);
|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
|*|  var intervalID = window.setInterval(code, delay);
|*|
\*/

if (document.all && !window.setTimeout.isPolyfill) {
  var __nativeST__ = window.setTimeout;
  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
    var aArgs = Array.prototype.slice.call(arguments, 2);
    return __nativeST__(vCallback instanceof Function ? function () {
      vCallback.apply(null, aArgs);
    } : vCallback, nDelay);
  };
  window.setTimeout.isPolyfill = true;
}

if (document.all && !window.setInterval.isPolyfill) {
  var __nativeSI__ = window.setInterval;
  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
    var aArgs = Array.prototype.slice.call(arguments, 2);
    return __nativeSI__(vCallback instanceof Function ? function () {
      vCallback.apply(null, aArgs);
    } : vCallback, nDelay);
  };
  window.setInterval.isPolyfill = true;
}

IE Only Fix

If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and above, you can either use JavaScript conditional comments:

/*@cc_on
  // conditional IE < 9 only fix
  @if (@_jscript_version <= 6)
  (function(f){
     window.setTimeout =f(window.setTimeout);
     window.setInterval =f(window.setInterval);
  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return
    f(function(){c.apply(this,a)},t)}});
  @end
@*/

Or go for a very clean approach based on the IE HTML conditional feature:

<!--[if lt IE 9]><script>
(function(f){
window.setTimeout =f(window.setTimeout);
window.setInterval =f(window.setInterval);
})(function(f){return function(c,t){
var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
});
</script><![endif]-->

Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:

var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);

Yet another possibility is to use function's bind. Example:

setTimeout(function(arg1){}.bind(undefined, 10));