为什么这个javascript(jQuery)没有进入无限循环?

时间:2008-12-11 03:13:26

标签: jquery javascript-events loops

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

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

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

4 个答案:

答案 0 :(得分:9)

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

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”。

答案 1 :(得分:3)

因为呼叫属于内部功能。

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()时,不会评估括号内的代码,而是在单击发生时评估。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

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,它只是保存对稍后将调用它的函数的引用。

豫ICP备18024241号-1