javascript - 停止 mouseleave 或 mouseout 上的无限循环

Question

我正在试验当鼠标按下时连续执行功能的东西。我让它无限循环，这正是我想要的，但我似乎无法再停止该循环。

我尝试这样做:-

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

它接受 false 参数并且应该停止循环。但循环会无限地继续下去，导致页面崩溃。我希望每当调用某个事件时无限循环就停止，无论是 mouseup、mouseout、mouseleave 中的哪一个。

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

请注意这会使您的浏览器崩溃。

Answer 1

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

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

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

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

所以一种方法是将标志放在外面(公共(public)标志，全局范围):

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

现在您可以看到循环在按住鼠标时运行，并在松开鼠标等时停止。