Question

我正在Karl Swedberg's blog上阅读关于绑定和取消绑定事件的伟大文章（因为我是使用jQuery的js初学者），我对这部分代码感到非常困惑（简化为简洁）：

    function addItemUnbind() {
      $Add a button but it won't have it's event added;
      addItemUnbind();
  });

为什么通过在自身内部放置相同的函数，它不会继续执行无限循环？但是，它用于将事件重新绑定到元素......！

Answer 1

据我所知，你的例子会。但是，您的示例与您引用的网站上的示例不同。

function addItemUnbind() {
  $('#list6 li.special button')
    .unbind('click')
    .bind('click', function() {
      var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
      $(this).parent().after($newLi);
      addItemUnbind();
  });
}

在此示例中，当用户单击按钮时，将调用“addItemUnbind”。

Answer 2

因为呼叫属于内部功能。

E.g。他在addItemUnbind（）中做了一些事情，其中一个就是将一个函数绑定到一个按钮点击。

然后声明该函数，例如在addItemUnbind（）中有：

.bind('click', function() {
  var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  $(this).parent().after($newLi);
  addItemUnbind();
  }

调用addItemUnbind（）时，不会评估括号内的代码，而是在单击发生时评估。

Answer 3

答案隐藏在你拿出的部分代码中。你发布的内容确实是一个无限循环。但是，这是一个更完整（但仍然简化）的示例，从链接的博客文章修改：

function addItemUnbind() {
  bind('click', function() {
    addItemUnbind();
  });
}

对addItemUnbind的调用是在一个闭包中 - 一个新的匿名函数，它与创建它的addItemUnbind函数分开。不是立即调用，而是将新函数的引用传递给bind函数。所以如果bind函数看起来像这样：

function bind(eventName, eventHandler) {
  eventHandler();
}

然后你会有一个无限循环，因为对eventHandler的调用将返回addItemUnblind。但如果它看起来像这样：

function bind(eventName, eventHandler) {
  this.events[eventName] = eventHandler; // save the event handler to call when an event happens
}

那时没问题。它不会调用addItemUnbind，它只是保存对稍后将调用它的函数的引用。

Answer 4

啊......就像许多事情一样......“观察丹尼尔！”。不可否认的是，我认为事件处理工作的方式存在异常，导致我浏览了我认为已经知道的文章。由于你的仔细解释，我现在看得很清楚了。

为什么这个javascript（jQuery）没有进入无限循环？

4 个答案: