Почему код после цикла выполняется до изменения dom внутри цикла?

Question

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

Я решил подражать этой ситуации в кратком коде, показанном ниже. Когда вы запустите его, вы увидите, что предупреждение появляется перед выполнением кода в цикле. Для удобства я также создал JSFiddle ЗДЕСЬ.

function show_name(name) {
    for (var i = 0, len = name.length; i < len; i++) {
        if (name[i] == "H") {
            var text = document.getElementById("text_tag");
            text.innerHTML = "Hillary Clinton was a hot baby in the past :D";
        }
    }
    alert("But Bill preferred Monica :(");
}

<input type="text" id="name" size="18" style=" font-size:17px; margin-left:4px; " onchange="show_name(this.value)" />
<p id="text_tag"></p>

javascript loops

1

Anar Kazimov 5 Сен 2016 в 20:30

Answer 1

Ваш цикл выполняется правильно. но вы получаете предупреждение, прежде чем ваш текст появится в DOM. потому что браузеры отображают изменения в пакетном режиме, поэтому, когда он завершит работу с функцией show_name , он обновит текст. Вы можете быть уверены, добавив console.log / alert внутри вашего цикла.

function show_name(name) {
    for (var i = 0, len = name.length; i < len; i++) {
         console.log(name[i]); //alert(name[i]);
        if (name[i] == "H") {
            var text = document.getElementById("text_tag");
            text.innerHTML = "Hillary Clinton was a hot baby in the past :D";
        }
    }
    setTimeout(function(){
         alert("But Bill preferred Monica :(");
    },50);
}

<input type="text" id="name" size="18" style=" font-size:17px; margin-left:4px; " onchange="show_name(this.value)" />
<p id="text_tag"></p>

1

Sufian Saory 5 Сен 2016 в 19:49

Answer 2

Отображение оповещения не означает, что ваша страница обновляется, также, если вы действительно обновите свой код, вы потеряете пользовательские данные внутри элемента ввода, и ваш код выполняет поиск H во входных данных, когда данные были изменены внутри вашего цикл, а затем показать сообщение внутри.

<p id="text_tag"></p>

alert("But Bill preferred Monica :(");

Если вы хотите, чтобы оповещение было в конце цикла, то сместите позицию alert () внутри цикла следующим образом.

function show_name(name) {
    for (var i = 0, len = name.length; i < len; i++) {
        if (name[i] == "H") {
            var text = document.getElementById("text_tag");
            text.innerHTML = "Hillary Clinton was a hot baby in the past :D";
        }
       // end of loop
       if(i==(name.length-1)){
       alert("But Bill preferred Monica :(");
       }
    }

}

PS: я изо всех сил старался понять ваш вопрос, и кажется, что вы действительно не хотите "обновлять" страницу, но если вы это сделаете, вам следует просто window.location.reload()

0

Sujal Mandal 5 Сен 2016 в 17:53

Почему код после цикла выполняется до изменения dom внутри цикла?

2 ответа

Похожие вопросы

Новые вопросы

javascript