clearInterval is not clearing

Question

看看下面的函数，它的目的是更改按钮文本到"中止"、"中止0"、"终止1"等等。

一旦计数器达到10，则应执行另一个功能，但如果单击按钮，计数器应停止，按钮文本应返回到其原始值（"同步数据库"）。

我似乎试图用一种错误的方式来消除间隔。

如有任何协助，我们将不胜感激。

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的现场演示。