Question

我知道我可以轻松解决这个问题，但我正在寻找这种情况下的最佳做法。这是简化版http://jsbin.com/isered/3/edit。我正在尝试创建一个重用函数，但我需要它，以便在触发事件时（即单击锚标记），它只会将输出区域附加一次，而不是每次调用该函数。

Jquery的/使用Javascript

$(function () {

   function foo () {
      $('a').on('click', function () {
      $('.asdf').append('poo');
    });
   }

   foo ();
   foo ();
});

HTML

<a href='#'>hello</a>
<a href='#'>world</a>

<p class='asdf'></p>

Answer 1

您可以创建一个状态变量，在本例中为一个类：

$(function () {
  function foo() {
    $('a:not(.clicked)').on('click', function() {
      $(this).addClass('clicked');
      $('.asdf').append('poo');
    });
  }

  foo();
  foo();
});

Answer 2

你可以在绑定它们之前unbind事件：

function foo () {
  $('a').off('click').on('click', function () {
      $('.asdf').append('poo');       
  });
}

虽然我不明白为什么只调用一次这个函数并不是最好的解决方案。

Answer 3

当我想只创建一个容器一次但在后续点击中处理其余功能时，我经常会遇到这种情况。在这种情况下，我按如下方式检查容器的存在：

var foo = function(){
    $('a').on('click', function(ev){
       if (!$('.asdf .foo').length) {
           $('.asdf').append('<div class="foo">');
       }
       // do other click stuff here
    });
};

Answer 4

Underscore.js already has this function.

那么为什么要重新发明轮子呢。

_。once（function）创建一次只能调用的函数版本。重复调用修改后的函数将没有效果，从原始调用返回值。对...有用初始化函数，而不是必须设置布尔标志和然后再检查一下。

Example:

$(function () {

  var foo = _.once(function() {
    $('a').on('click', function () {
      $('.asdf').append('poo');       
    });
  });

  foo ();
  foo ();
});

Answer 5

$(function () {
    function foo () {
        $('a').on('click', function () {
            var num = $('.asdf').text().length;
            if (num == 0) {
                $('.asdf').append('poopsicles');
            }
        });
    }

    foo();
    foo();
});

我想这个问题已经得到了回答，但是现在就去了。

Javascript - 多次调用函数但只有一个效果

5 个答案: