Question

我的应用程序中有一个需要去抖动的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元素，它们用于调用对数据库执行查询的函数。

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

ie：用户点击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);
        }
  }

为此，我尝试了以下假设这会为每次带有类的元素添加去抖：＆＃34; taggable＆＃34;单击使用jQuery：

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

然而这不起作用。

我的问题是：我如何在全球范围内去除这个＆＃34; doTaggableChangeScript＆＃34;的所有实例？

Answer 1

您可以使用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);

Answer 2

你可以这样做：

＆＃13;

var time; // make a global var time.
$.fn.debounce = function(e, cb, el) {
  if (time) { // clear the time if there are already any timeout initialized.
    clearTimeout(time);
  } // clear the prev timeout and just allow the latest one to debounce

  time = setTimeout(function() {
    cb(e, el); // now call the function call to log only once
  }, 2000);

};

var doTaggableChange = function(e, el) {
  console.log("doTaggableChangeFired", e);
  alert("doTaggableChangeFired :::::: "+el.value);
};

$(function() {
  $('.taggable').click(function(e) {
    $(this).debounce(e, doTaggableChange, this);
    // bound the event on the selector and applied the custom debounce on it.
    // args passed are event, function to call and element itself.
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-list">
  <input type="checkbox" value="MenuItem1" class="taggable">MenuItem1</label>
<label>
  <input type="checkbox" value="MenuItem2" class="taggable">MenuItem2</label>

＆＃13;

去掉某个javascript方法的所有实例

2 个答案: