Question

码

<button onclick="this.disabled=true; setTimeout(function(){this.disabled=false;},500);">click</button>

this似乎是指窗口而不是按钮。如何传递按钮对象以便我可以重新启用它？

我知道解决方法......我可以给按钮一个ID，然后再抓一下，但我很想知道我是否能以某种方式通过this。

Answer 1

this由函数的调用方式定义。

foo.someFunc(); /* this is foo */
foo.bar.someFunc(); /* this is bar */
window.someFunc(); /* this is window */
someFunc(); /* this is window because window is the default */
setTimeout(foo.bar.someFunc, 500); /* this is window because you've passed a function and disassociated it from foo.bar */

如果要在函数之间传递它，则必须将其复制到另一个变量。

<button onclick="this.disabled=true; var that = this; setTimeout(function(){that.disabled=false;},500);">click</button>

Answer 2

您可以通过绑定它来显式设置函数的上下文。

<button onclick="
  this.disabled=true;
  setTimeout(
    function(){this.disabled=false}.bind(this),
    500)">click</button>

Answer 3

你会注意到禁用是有效的，只是启用没有。这是因为this不是局部变量;当事件处理程序触发时，它具有正确的含义：不再绑定到按钮。

Try这个：

<button onclick="var self=this; self.disabled=true; setTimeout(function(){self.disabled=false;},500);">click</button>

顺便说一下，尽量避免像这样编写内联代码。 Write proper handlers获得了巨大的胜利：

// HTML:

<button id="myBtn">click</button>

// JS:

window.onload = function() {
   document.getElementById('myBtn').addEventListener("click", function() {
      var self = this;
      self.disabled = true;
      setTimeout(function() {
          self.disabled = false;
      }, 500);
   }, false);
}

更详细，是的，但最终更易于维护。

jQuery使它成为even easier：

$(function() {
    $('#myBtn').click(function() {
      var self = this;
      self.disabled = true;
      setTimeout(function() {
          self.disabled = false;
      }, 500);
   });
});

如何将“this”传递给setTimeout回调？

3 个答案: