在mouseleave或mouseout上停止無限循環

Question

我正在嘗試在鼠標按下時連續執行功能的東西。 我讓它無限循環，這正是我想要的，但是我似乎再也無法停止該循環了。

我試着做：-

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

它使用了錯誤的參數，應該停止循環。 但是循環只會無限循環，導致頁面崩潰。 我希望無論何時調用某個事件（無論是mouseup，mouseout，mouseleave），該無限循環都將停止。

到目前為止，我的嘗試： -http : //jsfiddle.net/ZQTvN/

一定要意識到這將使您的瀏覽器崩潰。

Answer 1

您可以更改代碼以使用標志和setTimeout來實現所需的功能：

這樣的緊密循環（忙循環）將阻止來自瀏覽器的任何輸入，因此它基本上無法解析事件隊列，即。 瀏覽器被鎖定。

通過實現setTimout進行循環，您將允許瀏覽器也將其他事件排隊，您需要檢測何時停止它。

如果每次使用參數調用循環，則實際上只會多次觸發它。 當您使用false標志進行調用時，該標志將在該調用中處於本地狀態，並且對其他已開始的循環不執行任何操作，因為它們無法訪問此本地化標志。

因此，一種方法是將標志放置在外部（通用標志，全局范圍）：

此處修改的字段

例：

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

現在，您可以看到按住鼠標的同時運行循環，並在釋放鼠標時停止等。