Как заменить текст в тегах?

282
12 февраля 2019, 01:00

При выполнении функции js

    function foo(){ 
      var a;
      $('p.message').html('Привет!');
      a ='true';
      if(a=='true') {
        $('p.message').html('Пока!');
      }
    }

Появляется первое сообщение и остается, не меняется. Как сделать, чтобы сначала появилось 'Привет', а затем 'Пока' ?

Answer 1

Вы хотели получить такой эффект?

function foo(){ 
 $('p.message').html('Привет!'); 
  setTimeout(function(){ 
    $('p.message').html('Пока!'); 
  }, 1000) 
 } 
foo();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p class='message'></p>

Answer 2

В примере ниже примется во внимание только последняя строчка кода: box.style.display = "block"; Это произойдет потому, что в начале выполняется основной поток (весь твой js), а когда полностью весь он выполниться, то тогда наступает очередь рендеринга - обновление картинки до состояния актуальной. В него входить вычисление Style Calculation, Layout, Paint еще входит Request Animation Frame, и он вроде первый идет по списку, но это другая история. Так вот в момент подготовки кадра уже учитываеться конечный результат, по этому в твоем примере в силу вступает $('p.message').html('Пока!');.

function style() { 
	box.style.display = "none"; 
	box.style.display = "block"; 
	box.style.display = "none"; 
	box.style.display = "block"; 
	box.style.display = "none"; 
	box.style.display = "block"; 
	box.style.display = "none"; 
	box.style.display = "block"; 
} 
 
style();

Можно сделать с помощью setTimeout.

let a = true; 
 
function foo() { 
  if (a) { 
    $('p.message').html('Привет!'); 
    a = false; 
    setTimeout(foo, 2000); 
  } else { 
    $('p.message').html('Пока!') 
  } 
} 
 
foo();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p class="message"></p>

Если хотите лучше понять почему так происходит, то можете посмотреть хорошее видео про Event Loop.

READ ALSO
Прописать команды в DevTools console
javascript

Прописать команды в DevTools console

Мне нужно через консоль написать команды, изменяющие параметры отдельных элементов на веб страницеКак сделать это вручную, через вкладку...

 239
transform: scale деформирует текст
javascript

transform: scale деформирует текст

Писал анимацию для кнопок и столкнулся с проблемойКогда анимация срабатывает текст на кнопке немного расплывается

 242
Как получить целый объект, если есть одно его свойсто?
javascript

Как получить целый объект, если есть одно его свойсто?

У меня есть структура такого типа:

 251
Реализация Promise.race
javascript

Реализация Promise.race

Наткнулся в интернете на реализацию Promiserace:

 241