javascript - 删除某个javascript方法的所有实例

我的应用程序中有一个需要反跳的javascript。

页面的相关html如下：

<li id="liRetailer_10">
  <a href="javascript:;">
     <label class="checkbox-list">
       <input type="checkbox" id="retailer_10" value="MenuItem" class="taggable" onclick="doTaggableChange(this)">MenuItem</label>
  </a>
</li>

像这样有多个li元素，它们被用来调用在数据库上执行查询的函数。

我想在用户停止单击这些元素一段时间后执行该函数，否则每次单击都会调用该函数，从而不必要地降低了系统速度。

即：用户单击element1，然后立即单击element2，当前脚本执行两次。我希望函数运行一次。

称为onclick的方法如下：

function doTaggableChange(e) {
    var index = $(e).attr('id').indexOf('_');
    var type = $(e).attr('id').substring(0, index);
    var id = $(e).attr('id').replace(type + '_', '');
    var val = $(e).val();
    var data = {
    id: $(e).attr('id'),
    value: val
    };
    var checked = $(e).is(':checked');
    if (checked) {
      $('#tagsinput').tagsinput('add', data);
        addFilter(type, id);
        } else {
          $('#tagsinput').tagsinput('remove', data);
          removeFilter(type, id);
        }
  }

为此，我尝试了以下操作，假设每次使用jQuery单击具有“ taggable”类的元素时，都会添加一个反跳：

(function() {
     var dprocess = $.debounce(process, 5000);
     $('.taggable').click(function() {
         dprocess();
     });
}());

但是，这没有用。

我的问题是：如何全局反跳此“ doTaggableChangeScript”的所有实例？

最佳答案

您可以按以下方式使用debounce http://underscorejs.org/#debounce中的underscore.js

var doTaggableChange = _.debounce(function(e) {
                                    alert("doTaggableChangeFired", e);
                                  }, 300)

传递的函数将其执行推迟到自上次调用以来经过了等待的毫秒数。

var doTaggableChange = _.debounce(function(e) {
      var index = $(e).attr('id').indexOf('_');
      var type = $(e).attr('id').substring(0, index);
      var id = $(e).attr('id').replace(type + '_', '');
      var val = $(e).val();
      var data = {
        id: $(e).attr('id'),
        value: val
      };
      var checked = $(e).is(':checked');
      if (checked) {
        $('#tagsinput').tagsinput('add', data);
        addFilter(type, id);
      } else {
        $('#tagsinput').tagsinput('remove', data);
        removeFilter(type, id);
      }
    }, 300);