Сбросить счетчик OnClick

Question

Сбросить счетчик OnClick

0

У меня есть код, который я использую для обратного отсчета с 15 по прошествии 15 секунд, который он повторяет "раз". Проблема в том, что если кто-то дважды щелкнет, в одном Div будет два счетчика. Мне нужно, чтобы счетчик был сброшен, если кто-то снова нажимает кнопку.

function startCountDown(i, p, f) {
    // store parameters
    var pause = p;
    var fn = f;
    // make reference to div
    var countDownObj = document.getElementById("countDown");
    if (countDownObj == null) {
        // error
        alert("div not found, check your id");
        // bail
        return;
    }
    countDownObj.count = function (i) {
        // write out count
        countDownObj.innerHTML = i;
        if (i == 0) {
            // execute function
            fn();
            // stop
            return;
        }
        setTimeout(function () {
            // repeat
            countDownObj.count(i - 1);
        },
        pause);
    }
    // set it going
    countDownObj.count(i);
}

function myFunction() {
    alert("Time Over");
}

HTML:

<div id="TimerTitle">Timer</div>    
<span id="countDown"></span>
<button onclick="startCountDown(15, 1000, myFunction);">
    Start Time
</button>

puppet 29 март 2014, в 02:25

Источник

Теги:

javascript

jquery

2 ответа

0

setTimeout возвращает идентификатор таймера, который можно использовать с window.clearTimeout. Простейшим решением было бы создать глобальный timerId

var timerId; 
...

function startCountDown(i, p, f) { 
    ...
    if (timerId) { window.clearTimeout(timerId); }
    timerId = window.setTimeout(...);

https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout

Scott 28 март 2014, в 23:39

Ещё вопросы

Jabbath · Accepted Answer · 2014-03-28T23-22-00.000Z

Установите таймаут как глобальную переменную следующим образом:

timer = setTimeout(function(){countDownObj.count(i - 1);},pause);

В начале функции очистить тайм-аут

clearTimeout(timer)

Код:

var timer;
function startCountDown(i, p, f) {
// store parameters
if(timer){clearTimeout(timer)}
var pause = p;
var fn = f;
// make reference to div
var countDownObj = document.getElementById("countDown");
if (countDownObj == null) {
    // error
    alert("div not found, check your id");
    // bail
    return;
}
countDownObj.count = function (i) {
    // write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
        // execute function
        fn();
        // stop
        return;
    }
timer = setTimeout(function(){countDownObj.count(i - 1);},pause);
}
// set it going
countDownObj.count(i);
}

function myFunction() {
alert("Time Over");
}

Пробовал, но, кажется, сломал его, но все равно спасибо
Я забыл упомянуть, что вы также должны установить таймер в качестве переменной перед функцией. Код, который я добавил к своему ответу, работает для меня.
Я вижу, что это получило изрядное количество просмотров. Возвращаясь к своей работе, я просто не хотел использовать глобальные переменные. После этого я быстро понял, что это не проблема. ES6 хотя справиться с этим гораздо лучше.