Зачем показывать только оповещение 3 ???

Question

Зачем показывать только оповещение 3 ??? Что не так??? Обратный звонок разрешает это? Как?

CSS:

#foo { 
    width: 200px; 
    height: 30px; 
    display: none; 
    background-color: red; 
} 

HTML:

<div id="foo"><div> 

Jquery:

$('#foo').text('Alert 1').show(0).delay(5000).hide(0); 

$('#foo').text('Alert 2').show(0).delay(5000).hide(0); 

$('#foo').text('Alert 3').show(0).delay(5000).hide(0); 

Answer 1

Это фактически показывает 'Сигнал 1', й en 'Alert 2', затем «Alert 3», но слишком быстро для вашего глаза, чтобы увидеть его, или даже ваш монитор, чтобы отобразить его. Эти строки выполняются последовательно. Код не дожидается, когда строка 1 и ее 5000 мс задержите до завершения строки 2.

PHP сделает это, потому что это синхронный язык.

Javascript этого не делает, потому что он асинхронный: он может делать много вещей одновременно.

Чтобы подождать 5000 мс для каждого предупреждения, вам необходимо настроить функции обратного вызова: функции, которые выполняются после окончания чего-либо.

$('#foo') 
 
\t .text('Alert 1') 
 
\t .show() 
 
\t .delay(3000) 
 
\t .hide(0, showAlert2) 
 

 
function showAlert2(){ 
 
\t $('#foo') 
 
\t \t .text('Alert 2') 
 
\t \t .show() 
 
\t \t .delay(3000) 
 
\t \t .hide(0, showAlert3) 
 
} 
 

 
function showAlert3(){ 
 
\t $('#foo') 
 
\t \t .text('Alert 3') 
 
\t \t .show() 
 
\t \t .delay(3000) 
 
\t \t .hide(0) 
 
}

#foo { 
 
    width: 200px; 
 
    height: 30px; 
 
    display: none; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="foo"><h1>

Edit 1

Этот пример некрасиво, конечно, он повторяет код, но это для образовательных целей. Если у вас было много предупреждений для отображения, вы Факторизуете код (а не повторять):

var i=0; 
 

 
function showAlert(){ 
 
    i++; 
 
    $('#foo') 
 
    .text('Alert '+i) 
 
    .show() 
 
    .delay(3000) 
 
    .hide(0, showAlert) 
 
} 
 

 
showAlert(i)

#foo { 
 
     width: 200px; 
 
     height: 30px; 
 
     display: none; 
 
     background-color: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <h1 id="foo"><h1>

Edit 2

Или опять же, со списком предупреждений:

var alerts = ['alert 1', 'alert 2', 'alert 3', 'alert 4'], 
 
    i = 0; 
 

 
function showAlert(){ 
 

 
    $('#foo') 
 
    .text(alerts[i]) 
 
    .show() 
 
    .delay(3000) 
 
    .hide(0, showAlert) 
 
    
 
    if(i>alerts.length) return; 
 
    i++; 
 
} 
 

 
showAlert(i)

#foo { 
 
     width: 200px; 
 
     height: 30px; 
 
     display: none; 
 
     background-color: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <h1 id="foo"><h1>