Question

以下是重现此问题的示例。

<script>
    $(document).ready(function(){
        var repeatedTimes = 0;
        $.colorbox({html:'hello1'});
        $.colorbox({html:'hello2'});
        $.colorbox({html:'hello3'});
        $.colorbox(
        {
            html:'hello4',
            onComplete: function() {
                alert("repeat " + repeatedTimes++ + " times.");
            }
        });
    });
</script>

为什么onComplete函数执行多次？

注意：此代码仅用于重现该问题。在真实场景中，在彩盒调用之间，会执行其他代码。

注意：在这种情况下，colorbox用于在通常长时间的进程之间显示消息。问题是这些过程是短暂的。

Answer 1

我不熟悉这个模块，但你应该尝试在特定元素上调用插件，而不仅仅是$。

尝试$（'html'）。colorbox，无论它是什么......

Answer 2

正如Gummy指出的那样，你永远不需要以这种方式调用colorbox。只要您拥有$.colorbox()，就会立即打开颜色框（即使您设置了open:false选项）。虽然你没有看到前3个电话，因为下一个电话会立即控制可见部分，但它们仍会完整运行。这也意味着如果您定义了onLoad，onOpen和onCleanup回调，它们也会被调用4次。因为它发生得如此之快，所以在所有4次调用运行onComplete时，设置现在是最后一次调用中的任何内容。

但是，如果每个人在最后一个完成执行后执行，那么你就不会看到这种情况发生。例如：

$(document).ready(function() {
    var repeatedTimes = 0;

    $.colorbox({html:'hello1'});
    setTimeout(function(){
        $.colorbox({html:'hello2'});
    }, 1000);
    setTimeout(function(){
        $.colorbox({html:'hello3'});
    }, 2000);
    setTimeout(function(){
        $.colorbox({
            html:'hello4',
            onComplete: function() {
                alert("repeat " + repeatedTimes++ + " times.");
            }
        });
    }, 3000);
});

以您期望的方式工作 - 或者更确切地说，只调用onComplete一次。我想你可以把它当作某种横幅或类似的东西，但是有更好的方法可以做到这一点。

为什么onComplete函数执行多次？

2 个答案: