修改checkbox change()事件等待其他动作

Question

我有一个相当大的复选框列表，当您 check/uncheck 一个时，它们都会执行一个操作：

$("input[type='checkbox']").change(function () {
    DoSomething();
});

DoSomething() 方法其实很重。我运行遇到一个问题，如果有人在短时间内开始单击多个复选框，它会导致每次都调用该方法，

我想对此进行限制，以便如果用户在一两秒内单击多个复选框，它只会调用 DoSomething() 一次。

有没有办法在我调用 DoSomething() 之前等待几秒钟，直到用户完成复选框的检查？

Answer 1

您可以在 DoSomething() 为运行时禁用输入：

$("input[type='checkbox']").change(function () {
    $(this).prop('disabled', true);
    DoSomething();
    $(this).prop('disabled', false);
});

Answer 2

_{将我的评论移至答案。}

查看 _.throttle/_.debounce methods in underscore.js。如果您愿意将其用作库，那正是您所需要的。否则你可以只看源代码并复制你需要的方法。

以下示例在执行函数之前将在检查最后一个复选框后等待一秒钟：

Example Here

var debouncedFunction = _.debounce(function() {
  console.log('Debounced');
}, 1000);

$("input[type='checkbox']").change(debouncedFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

如上所述，如果您不想在项目中包含下划线，那么您可以简单地删除 _.debounce 方法。看看this example.

var debouncedFunction = debounce(function() {
  console.log('Debounced');
}, 1000);

$("input[type='checkbox']").change(debouncedFunction);

function debounce(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

  var later = function() {
    var last = new Date().getTime() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = new Date().getTime();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

Answer 3

使用此代码：

var Timer;
$("input[type='checkbox']").change(function() {
    clearTimeout(Timer);
    Timer = setTimeout(function(){
        MyFunction();
    }, 1000);
});

function MyFunction(){
    console.log("Timeout");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

Answer 4

以防万一您不想使用 underscore.js 您可以像这样创建自己的去抖功能：

function debounce(func, wait, immediate) {
    var timeout;

    console.log('onfunct');
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

然后这样称呼它

$("input[type='checkbox']").change(
    debounce(function(ev) {
        alert('Do something here');
    }, 1000, 0)
);

选中复选框后有效等待 1 秒。如果 immediate 标志设置为 1（或真），则事件将发生在前沿而不是末端。

Test the JSFiddle here

修改checkbox change()事件等待其他动作

Modify checkbox change() event to wait for other actions

javascript

jquery

jquery-events