超出最大调用堆栈大小，无限循环

Question

我有三个 Select2 框。当我更改一个时，所有 not-clicked 都需要重置。当我这样做时，它会导致无限循环，并且我得到标题中列出的错误。我该如何解决？

var group = $(".searchgroup1");

group.on('change', function(){
    var box = group.index($(this));
    group.each(function(index){
        if(box != index){
            $(this).val(null).trigger("change"); // <-- this resets the <select>
            //If I remove the code up here, the infinite loop disappears
        }
    });
});

Answer 1

jQuery 的 trigger（即 click 不带参数的调用）在元素同步上调用事件处理程序。由于您正在触发您正在处理的事件，因此您实际上是在没有退出子句的情况下递归调用您的事件处理程序，因此您运行出栈。

这里证明回调是同步的：

$("#foo").on("click", function() {
  log("Clicked");
});
log("Clicking");
$("#foo").click();
log("Done clicking");

function log(msg) {
  $("<p>").text(msg).appendTo(document.body);
}

<div id="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以通过将调用包装在 setTimeout:

中使调用异步

var $this = $(this);
$this.val(null);
setTimeout(function() {
    $this.trigger("change");
}, 0);

超出最大调用堆栈大小，无限循环

Maximum call stack size exceeded, infinite loop

javascript

jquery

jquery-select2