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

【问题标题】：Maximum call stack size exceeded, infinite loop超出最大调用堆栈大小，无限循环
【发布时间】：2016-05-15 13:00:29
【问题描述】：

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

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
        }
    });
});

【问题讨论】：

标签： javascript jquery jquery-select2

【解决方案1】：

jQuery 的trigger（这是click 不带参数调用的方法）同步调用元素上的事件处理程序。由于您正在触发您正在处理的事件，因此您实际上是在没有 get-out 子句的情况下递归地调用您的事件处理程序，因此您会用完堆栈。

这是回调是同步的证明：

$("#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);

【讨论】：