以下是重现此问题的示例。
<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用于在通常长时间的进程之间显示消息。问题是这些过程是短暂的。
答案 0 :(得分:0)
我不熟悉这个模块,但你应该尝试在特定元素上调用插件,而不仅仅是$。
尝试$('html')。colorbox,无论它是什么......
答案 1 :(得分:0)
正如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一次。我想你可以把它当作某种横幅或类似的东西,但是有更好的方法可以做到这一点。