修改checkbox change(）事件以等待其他操作

Modify checkbox change() event to wait for other actions

本文关键字：等待 其他 操作 事件 checkbox change 修改      更新时间：2023-09-26

我有一个相当大的复选框列表，当你选中/取消选中一个时，所有复选框都会执行一个操作：

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

DoSomething()方法实际上相当重。我遇到过一个问题，如果有人在短时间内开始点击多个复选框，就会导致每次都调用该方法，

我想限制一下，这样，如果用户在一两秒钟内单击其中的几个复选框，它将只调用DoSomething()一次。

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

将我的评论移动到一个答案

看看undercore.js中的_.throttle/_.debounce方法。如果你能很好地将其用作库，那正是你所需要的。否则，您可以只查看源代码并复制所需的方法。

以下示例将等待一秒钟，因为在执行该功能之前已选中最后一个复选框：

此处示例

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方法。看看这个例子。

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" />

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

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

如果你不想使用underscore.js，你可以创建自己的debounce函数，如下所示：

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（或true），则事件将发生在前沿而不是末尾。

在此处测试JSFiddle

使用此代码：

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" />

相关文章：