Question

我正在尝试一些在鼠标停机时连续执行功能的东西。我让它无限循环，这正是我想要的但我似乎无法停止那个循环。

我尝试过： -

$(document).on("mouseup mouseout",".someclass",function(){ loop(false) } );

采用false参数并应该停止循环。但循环只是无限地导致页面崩溃。我希望无限循环在每次调用某个事件时停止，无论是mouseup，mouseout，mouseleave都是。

到目前为止我的尝试： - http://jsfiddle.net/ZQTvN/

请注意这会导致浏览器崩溃。

Answer 1

您可以更改代码以使用标志和setTimeout来实现您想要的效果：

像这样的紧密循环（忙循环）将阻止来自浏览器的任何输入，因此它基本上无法解析事件队列，即。浏览器被锁定。

通过实现setTimout来执行循环，您将允许浏览器对其他事件进行排队，您需要检测何时停止它。

如果你每次用一个参数调用你的循环，你实际上只会多次重新触发它。当您使用false标志调用时，该标志将是该调用的本地标志，并且对已启动的其他循环不执行任何操作，因为它们无权访问此locallized标志。

所以一种方法是将标志放在外面（公共标志，全局范围）：

<强> MODIFIED FIDDLE HERE

示例：

var doLoop = false;

function loopy() {
    if (doLoop === true) {
        setTimeout(function () {
            console.log(doLoop);
            loopy();
        }, 11);
    }

};
$(document).on("mousedown", ".classy", function () {
    doLoop = true;
    loopy();
});
$(document).on("mouseup mouseout", ".classy", function () {
    doLoop = false;
});

现在你可以看到循环在按住鼠标的同时运行，并在释放时停止等等。

在mouseleave或mouseout上停止无限循环

1 个答案: