Как можно использовать setInterval () для изменения текста?

#javascript #setinterval #timing

#javascript #setinterval #время

Вопрос:

Я работаю над этим уже довольно долгое время. Я пытаюсь создать простой таймер, который ведет обратный отсчет. Я заставил alert () работать, но, к сожалению, textToChange не меняется. Я воспроизвел копию своего кода ниже. Буду признателен за любую помощь! Спасибо.

 <script type="text/javascript">
    var timeLeft = 0;
    var changingTextElement;
    var changingText = new Array();
    var ctr = 0;

    function timeMsg(thing)
    {
    var length = thing.inputbox.value*1000;
    var t = setTimeout("alertMsg()",length);
    timeLeft = length/1000;
    initChangeText();
    }

    function alertMsg()
    {
    alert("Alert!");
    }

    function initChangeText(){
        changingTextElement = document.getElementById("textToChange");
        changingText[ctr] = changingTextElement.innerHTML;
        ctr  ;
        while(timeLeft > 0){
            changingText[ctr] = timeLeft;
            timeLeft--;
            ctr  ;
        }
        ctr = 0;    
        setInterval("changingText()",1000);
    }

    function changingText() {
        ctr  ;
        if(ctr >= changingText.length){
            changingTextElement.innerHTML = 0;
        }
        else{
            changingTextElement.innerHTML = changingText[ctr];
        }
    }

</script>

1. Не могли бы вы также опубликовать свой HTML-код, чтобы мы могли проверить идентификаторы, элементы и т.д.?

2. Нет причин создавать changingText массив (он может стать потенциально огромным). Вы можете вычислить нужное значение для отображения «на лету»…

3. @Томас: Нет, changingTextElement определяется в глобальной области видимости в верхней части блока сценария. Если вы добавите var , это никак не будет работать.

4. @Thomas — почему, они определены глобально, поэтому изменять нужно только с точки зрения чистоты, а не с точки зрения функциональности

Ответ №1:

Вы используете changingText функцию и changingText массив …

Видите конфликт?

В качестве дополнительной информации,

не используйте строки в качестве имен функций в setInterval методе. Используйте ссылку на метод напрямую

 setInterval(changingText, 1000);

Ответ №2:

Для простого таймера обратного отсчета этот код слишком большой. В принципе, то, что вы должны делать, это:

Установите количество секунд, с которого следует отсчитывать
Запустите таймер, используя setInterval который уменьшает счетчик и отображает его

Это может быть просто, как:

 var countFrom;
var timer;
function run_timer() {
    document.getElementById("textToChange").innerHTML = --countFrom;
    // !0 evaluates to true, if the counter reaches 0 (wait 0 seconds) ...
    if (!countFrom) {
        clearInterval(timer);
        alert("Timer finished!");
    }
}
function init_timer () {
    // stop previous timers if any
    clearInterval(timer);
    // start counting from 30 seconds
    countFrom = 30;
    timer = setInterval(run_timer, 1000);
}

Ответ №3:

Ваша версия в скрипте. Я изменил название функции

http://jsfiddle.net/mplungjan/jqeDv/