Javascript delay not working. Tried too many things

Question

I am new with JavaScript programming. I am making a program for deaf and blind children community. It is text to display Letters program. It split text and show image on screen.

How it works:

HTML and JavaScript base program. Input sentence taken from user. JavaScript split it and send relevant image name to HTML for display.

Problem:

It shows all images at once without delay. When I use alert() it shows all images are being displayed. 3rd day going on I tried to implement delay timebase substraction or settimeout but not working. Perhaps I am doing something wrong. I need community help to fix this.

Code:

<html lang="en">
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="index.css" />
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <title>Image Changer</title>
  </head>
// How to change image SCR through javascript.  

<body>

<input id="txt" name="txt" type="textbox" />

<img id="image1" src="./multimedia/alphabets/0.jpg" style="width:100px">

<button onclick="imagechange((document.getElementById('txt').value) , document.getElementById('image1.scr'))">Button</button>


<script type="text/javascript">
    function imagechange(txt,image1){
    
        var txt1 =  "";
        var txt2 =  "";
        var imagefolderlocation = "./multimedia/alphabets/";        
        for (var i = 0; i < txt.length;i++) {
                txt1 = txt.charAt(i).toUpperCase();

        alert(txt1);    
        document.getElementById('image1').src = imagefolderlocation + txt1 +".jpg";
        if(txt1 == " " )
             document.getElementById('image1').src = imagefolderlocation + "Blank.jpg";

        }
    }
    
    
</script>

</body>
</html>

score 2 · Accepted Answer · answered Nov 21 '21 at 07:33

setTimeout is async so that's probably the reason it did not work. To make it work, you can do something like this

<script type="text/javascript">
       function delay(time) {
         return new Promise(function(resolve) {
           setTimeout(resolve, time);
         });
       }

       async function imagechange(txt,image1){
         var txt1 =  "";
         var txt2 =  "";
         var imagefolderlocation = "./multimedia/alphabets/";        
         for (var i = 0; i < txt.length;i++) {
                txt1 = txt.charAt(i).toUpperCase();
                await delay(1000);   
                document.getElementById('image1').src = imagefolderlocation + txt1 +".jpg";
                if(txt1 == " " ) document.getElementById('image1').src = imagefolderlocation + "Blank.jpg";
        }
    }
</script>

I made a delay promise from the setTimeout and made your imageChange function async so I can await the delay promise during each loop.

score 0 · Answer 2 · answered Nov 21 '21 at 07:55

I guess this is because DOM manipulation is synchronous and DOM rendering is asynchronous. Actually you can try this:

function imagechange(txt,image1){
    var txt1 =  "";
    var txt2 =  "";
    var imagefolderlocation = "./multimedia/alphabets/";        
    for (var i = 0; i < txt.length;i++) {
        txt1 = txt.charAt(i).toUpperCase();

        alert(txt1);    
        document.getElementById('image1').src = imagefolderlocation + txt1 +".jpg";
        if(txt1 == " " ) document.getElementById('image1').src = imagefolderlocation + "Blank.jpg";

        console.log(document.getElementById('image1').src);
    }
}

You can see the result in the console, image1.src did change but was not rendered. To make it work, you can use the asynchronous function like this if you are using ES5:

function imagechange(txt,image1){
    var txt1 =  "";
    var txt2 =  "";
    var imagefolderlocation = "./multimedia/alphabets/";
    for (var i = 0; i < txt.length;i++) {
        txt1 = txt.charAt(i).toUpperCase();

        // Use closures to avoid the problems caused by the txt1 variable context
        function imageChange(imageName) {
            setTimeout(function () {
                document.getElementById('image1').src = imagefolderlocation + imageName +".jpg";
                if(txt1 === " " ) {
                    document.getElementById('image1').src = imagefolderlocation + "Blank.jpg";
                }
            }, 1000 * i);  // Change image1.src after i seconds
        }
        imageChange(txt1);
    }
}

Btw, you should use  in HTML if you want to add comments.

i found my shortfalls in above replies. all solution worked and works like charm. thank you all fellas. — Waseem, Nov 21 '21 at 10:23

Javascript delay not working. Tried too many things

How it works:

Problem:

Code:

2 Answers2