clearInterval не очищает

Question

Посмотрите на функцию ниже. Она предназначена для изменения текста кнопки на "Abort", "Abort 0", "Abort 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 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);
}