javascript - jQuery change html text by iterating over array -

if write html:

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

and js:

messages = ["here", "are", "some", "messages."]  $(function() {    (var = 0; < messages.length; i++) {     $('#message').html(messages[i]).delay(1000);   }  }); 

and load page, expect see each string in array show delay in between. however, see "messages." appear. seems loop iterates through each value in array before performing delay.

i have seen method getting desired visual result (how can change text after time using jquery?), know why earlier method not work. going on when code executed?

note jquery's delay effects; methods html not use effects queue , therefore not affected delay.

this problem better solved javascript's native settimeout function. there many ways this; in fact, don't need jquery!

let messages = ["here", "are", "some", "messages."];  let delay = 1000;  let header = document.getelementbyid("message");    messages.foreach(function(message, i) {    settimeout(function() {      header.innertext = message;    }, delay * i);  });

<h1 id="message" />