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

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

你可以unbind个结合他们之前的事件：

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

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

Answer 2

你可以让一个状态变量，在这种情况下类：

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

    foo(); 
    foo(); 
}); 

Answer 3

Underscore.js already has this function.

那么，为什么重新发明轮子。

_.once（function）创建只能被调用一次的函数的一个版本。重复调用修改后的功能将不会产生 效果，从原始调用返回值。对于初始化函数 有用，而不必设置布尔标志并且 稍后再检查。

Example:

$(function() { 

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

    foo(); 
    foo(); 
}); 

Answer 4

我经常遇到这样的时候我想打一个容器只有一次，但处理后续点击的功能，其余为好。在这种情况下，我把支票容器的存在如下：

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

Answer 5

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

    foo(); 
    foo(); 
}); 

我想这个问题已经回答了，但在这里，雅去。