javascript - clearInterval 未清除

Question

看看下面的函数，它的目的是将按钮文本更改为“Abort”、“Abort 0”、“Abort 1”等。

一旦计数器达到 10，应该执行另一个函数，但是如果单击按钮，计数器应该停止，并且按钮文本应该返回到它的原始值（“同步 DB”）。

看来我试图以错误的方式清除间隔。

任何帮助将不胜感激。

function sync_database(abort)
{
if (abort == true) { sync_db_btn.innerHTML = "Sync DB"; return false }

sync_db_btn.innerHTML = "Abort"
var i = 0;
sync_db_btn.addEventListener("click", function() { sync_database(true) } );

var x = setInterval(function() {
    if (abort == true) {
        clearInterval(x);
    }

    if (i < 10) {
        sync_db_btn.innerHTML = "Abort " + i++; 
    }
}, 1000);
}

Answer 1

var x;

sync_db_btn.addEventListener("click", function() {
    sync_database(true); 
    clearInterval(x); 
} );

function sync_database(abort)
{
if (abort == true) { sync_db_btn.innerHTML = "Sync DB"; return false }

    sync_db_btn.innerHTML = "Abort"
    var i = 0;

    x = setInterval(function() {    
        if (i < 10) {
            sync_db_btn.innerHTML = "Abort " + i++; 
        }
    }, 1000);
}

Answer 2

我认为你需要这样的东西：

var sync_db_btn = document.getElementById('but'),
    abortSync = -1,
    interval,
    sync_database = function () {
        var i = 0;
        abortSync *= -1;
        if (abortSync < 0) {
            sync_db_btn.innerHTML = 'Sync DB';
            clearInterval(interval);
            return false;
        }
        sync_db_btn.innerHTML = 'Abort';
        interval = setInterval(function () {
            if (i < 10) {
                sync_db_btn.innerHTML = 'Abort ' + i++;
            } else {
                sync_db_btn.innerHTML = 'Sync DB';
                clearInterval(interval);
                abortSync = -1;
            }
        }, 1000);
    };
sync_db_btn.addEventListener('click', sync_database);

jsFiddle 的现场演示。