Cfxtrjtrk

I want to replace the content of a paragraph using items from an array dynamically time after time. The output is fine when I use console.log() to check the results. But it is not replacing the content on the paragraph as expected, just shows the last word when the iteration is complete.

Here is the code I made to create and iterate over the array:

$(document).ready(function()

{

    var _strng = "Lorem ipsum dolor sit amet";

    var _array = new Array();

    _array = _strng.split(' ');



    jQuery.each(_array, function(index,item)

    {

        console.log(item); // Works fine

        $('p').html(item); // Only shows the last word when the iteration is over

        wait(1000); // Custom function

        console.clear();

    });

});

The wait() function:

function wait(_timeframe)

{

    var final = 0;

    var timeframe = new Date(_timeframe);    

    var initial = Date.now();

    final = initial + _timeframe;



    while (Date.now() < final) { };

}

HTML code:

<p>Text to be replaced here</p>

Check the next example using the setInterval() method, it will replace the text of the <p> element every N seconds, looping back to the start of the array when it reach the end.

Also, I added a button to show you how to stop the execution of this procedure using the clearInterval() method (just in case you need to learn about it).

$(document).ready(function()

 {

    // Define the time interval between executions (in milliseconds).

    var _ivalTime = 3000;



    var _strng = "Lorem ipsum dolor sit amet";

    var _array = _strng.split(' ');

    var _idx = 0;



    var ival = setInterval(function()

    {

        var item = _array[_idx++];

        console.log(item);

        $('p').html(item);



        // Check the restart (loop back) condition.



        _idx = (_idx >= _array.length) ? 0 : _idx;

    },

    _ivalTime);

    

    // Register listener on the click event of stop button.

    

    $("#btnStop").click(function()

    {

        clearInterval(ival);

    });

});

.as-console-wrapper {

    max-height: 50% !important;

}



p {

    background: skyblue;

    text-align: center;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<p>INITIAL TEXT...</p>

<br>

<button id="btnStop" type="button">Stop</button>

The problem is, that you wait functions blocks the ui. Instead, you should use window.setTimeout, which calls a callback after a specific time.

You could try something like this for your problem

$(function() {

    var words = ["Lorem", "ipsum", "dolor"];

    var $element = $("p");



    // callback function

    var f = function() {

        $element.html(words.shift());

        if (words.length > 0) {

            window.setTimeout(f, 1000);

        }

    }



    // initial call

    f();

};