clearInterval没有清除

Question

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

一旦计数器达到10，应该执行另一个函数，但是如果单击按钮，计数器应该停止，按钮文本应该返回到它的原始值("Sync 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 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现场演示。

Answer 2

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