Trouble with changing image src content

Question

I have a function that should postpone the call for the next function :

function waitFunc(  func, time )
{
    var startTime = performance.now();
    var currTime = performance.now();

    while ( (currTime - startTime) <= (time / 1))
    {
        currTime = performance.now();
    }

    func();
}

Another two function that i have are supposed to change the content of the tag i have in the body:

function showPlus()
{
    //display plus                  
    pictureImg.src = plus;

    //blank only the form that contains input
    inputForm.style.display="none";
    pictureImg.style.display="block";

    //after timeout start "showPicture" function
    waitFunc(showPicture, 250); 
    //setTimeout(showPicture, 250);     
}

function showPicture()
{
    //generate picture pass
    imgName = "../images/Slide"+ i + ".PNG";

    if (i < 100)
    {
        //increase variable i by 1
        ++i;

        //blank only the form that contains input
        inputForm.style.display="none";
        pictureImg.style.display="block";

        //display picture                   
        pictureImg.src = imgName;

        //after timeout start "showForm" function
        waitFunc(showForm, 750);
        //setTimeout(showForm, 750);    
    }
}

In the html:

<img src="../images/Blank.png" id="pictures" name="pictures"/>

Currently i am trying to call to waitFunc function from showPlus function and i expect that showPicture function would be called after the timeout. PROBLEM: When i use waitFunc function the content does not change as it suppose. However, when i use setTimeout function everything works just great.

Can some please assist me (i hope that this is not a stupid question)?

P.S. you can find the page here.

Thank you!

EDIT: You can also find a jsfiddle here. Notice that the fiddle is using setTimeout so you can see how it is supposed to work; if you comment the setTimeout and uncomment the waitFunc line next to it, then you will be able to see the issue.

Why are you using the function `waitFunc` instead of a `setTimeout`? — Alvaro Montoro, Oct 03 '14 at 18:22
@AlvaroMontoro He says setTimeout works as expected at the bottom of his post. Presumably he's just doing this as a programming exercise and not to solve any sort of real problem. — Ben, Oct 03 '14 at 18:25
@Alvaro Montoro Well, the setTimeout() method is inaccurate. I am dealing with milli seconds so i prefer that it would be as accurate as it possibly on a web. — Max Z, Oct 03 '14 at 18:26
BTW Your `waitFunc` is hanging the browser while it is being executed. — phts, Oct 03 '14 at 18:30
And is there an infinite loop? Because when call `showPlus` then call `showPicture` then call `showPlus` then call `showPicture`..... And all that time the browser is hanging. — phts, Oct 03 '14 at 18:33
You freeze the browser for 3/4 of a second, in which neither you or the user can do anything. It may be more accurate, but it's less efficient — Alvaro Montoro, Oct 03 '14 at 18:33
Does `waitFunc` not block up the ui? Also, what's with `time/1`? — ncksllvn, Oct 03 '14 at 18:38
@Alvaro Montoro A website will be used as psychological experiment (for gathering data from users). Freezing the browser is not an issue as long as the image would be displayed for the exact amount of time (750 milliseconds). — Max Z, Oct 03 '14 at 18:40
possible duplicate of [javascript pass function as parameter](http://stackoverflow.com/questions/13286233/javascript-pass-function-as-parameter) — Wissam El-Kik, Oct 03 '14 at 18:49
@WissamEl-Kik OP's code matches the solution in the question you shared, and it doesn't work for him/her. I'd say it's not a duplicate — Alvaro Montoro, Oct 03 '14 at 18:53
@MaxZ I think I found the problem and, if I'm right, you are not going to like it: If I comment the `waitFunc(showForm, 750);` the image is displayed correctly. As we were telling you, your method freezes the browser, and my best guess is that it does it before it has had time to download and display the picture. That's why you'd see a different behavior with `setTimeout` and `waitFunc`. One option would be to attach a handler to the image load, so when it is loaded, you call `waitFunc` but I'd need to look into that. — Alvaro Montoro, Oct 03 '14 at 19:25

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

There's a function called setTimeout() which does exactly the same functionality you need. Why don't you use it instead of building JavaScript all over again.

Also, performance.now(); isn't supported in all the browsers:

https://developer.mozilla.org/en-US/docs/Web/API/Performance.now

Also, your function shouldn't work at all:

var startTime = performance.now();
var currTime = performance.now();

Here you should have startTime == currTime because you're setting the same value in less than 1 millisecond.

while((currTime - startTime) <= (time / 1))

Here, (currTime - startTime) should be equal to zero, and (time / 1) is equal to time.

I don't understand what you're trying to do, but if you're looking to "pass a function as a parameter", your question is a duplicate: Pass a JavaScript function as parameter

edited May 23 '17 at 10:26

Community

1
1

answered Oct 03 '14 at 18:39

Wissam El-Kik

2,469
1
17
21

My question is about using different method than setTimeout, according to [link](http://stackoverflow.com/questions/196027/is-there-a-more-accurate-way-to-create-a-javascript-timer-than-settimeout) setTimeout is inaccurate. I was trying to implement this method: [link](http://stackoverflow.com/questions/6233927/microsecond-timing-in-javascript) – Max Z Oct 03 '14 at 18:56
The response is most probably in one of the links you shared: http://stackoverflow.com/a/9576841/1337185 – Wissam El-Kik Oct 03 '14 at 19:30

chfumero · Answer 2 · 2014-10-03T19:45:45.750

You must know that javascript is excuted in a single thread. If you run a wait function implemented using a while statement the main thread of the page will be frozen.

The difference of you waitFunc implementation and the setTimeout of javascript is that the setTimeout function run in a separated thread. By other side your function is executed synchronous. By example the showPicture function will take 75000 ms on it run because the loop will wait on each waiFunc 750 ms.

I hope that this help.

This code works perfect. When the page load the main thread is busy for 3 seconds set the 3.jpg image and after 2 seconds the image return to be the first image again. This is using you function and the settimeout.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/lib/jquery-2.1.1.js"></script>
    <script>
           function waitFunc(  func, time )
           {
               var startTime = performance.now();
               var currTime = performance.now();

               while ( (currTime - startTime) <= (time / 1))
               {
                   currTime = performance.now();
               }

               func();
           }

           $(function(){
               waitFunc(function(){

                   $('#dd').prop('src', '3.jpg');

               }, 3000);

               setTimeout(function(){
                   $('#dd').prop('src', 'A_Girl_In_The_Horizon_by_yeg0.jpg');
               }, 2000)
           });
    </script>
</head>
<body>
    <img id='dd' src="A_Girl_In_The_Horizon_by_yeg0.jpg">
</body>
</html>

Thank you for clearing the thread matter for me. My intention was to display a picture which i set up in showPicture function for 750 ms so i am not expecting to use a browser for this amount of time. Still the picture is not shown as it happens when i use setTimeout function. Any thoughts about that? — Max Z, Oct 03 '14 at 19:32

score 0 · Answer 3 · answered Oct 03 '14 at 19:53

I ran some tests and, as I mentioned in the question comment, the issue seems to be that the waitFunc that you use freezes the browser before it is able to load the picture and change the display.

I got something kind of working, but again, you may not like it: the solution would consist on using setTimeout (with a low milliseconds value: 1-20) to call waitFunc (with the value that you want minus the 1-20 milliseconds). Something like this:

setTimeout(waitAuxForm, 1);

And then you have the function:

function waitAuxForm() { waitFunc(showForm, 749); }

I have put it in a jsfiddle and you can see it working here.

This solution presents some issues too:

You have to rely on setTimeout for a low amount of time (you may not like this).
You may need more than 1-20 milliseconds to load the pictures (you may want to preload them and once cached, it would work even with a value of 1).

I hope it helps :)

Thanks a lot for the effort! I will try to implement the onload trigger as you suggested and if i wont succeed i will use this implementation (it minimize deviation). — Max Z, Oct 03 '14 at 20:15

score -1 · Answer 4 · answered Oct 03 '14 at 18:37

-1

Okay, so I was able to get this to work with the information you provided. Right out of the gates, looking at what you have, nothing is defined. However, assuming that you have inputForm and pictureImg defined correctly in both of the last functions, the only thing you're missing is to define i.

function showPicture()
{
    var i = 0;

    //generate picture pass
    imgName = "../images/Slide"+ i + ".PNG";

    [...]
}

I couldn't find anything wrong with your waitFunc function. If you substitute in a simpler function, it works as intended.

function waitFunc(  func, time )
{
    [...]

    while ( (currTime - startTime) <= (time / 1))
    {
        currTime = performance.now();

        console.log(time); // log so you can see, for testing
    }

    func();
}

waitFunc(function(){console.log("Hello, world!");}, 750); // wait 750 ms, then say "Hello, world!"

answered Oct 03 '14 at 18:37

helllomatt

1,331
8
16

Never use file extensions with capital letters. `.PNG` should be `.png`, for one reason: **some softwares / libraries / frameworks etc. ** have problem reading/loading files with a file extension in capital letters. You should always use lowercase letters for file extensions. I also don't understand why you wrote `(time / 1)`. It's equal to `time`. Why are you creating `var i = 0;` and using the variable later on in the image path, if it's gonna be equal to zero ?! – Wissam El-Kik Oct 03 '14 at 18:48
I agree with you on the file extension to be lower case, and the `(time / 1)` which seems silly. Most of that code is a straight copy/paste from OP that I didn't bother to fix in attempt to keep the context of the original code. Creating `var i = 0` will allow the `if (i < 100)` condition to be executed instead of throwing an error for a missing `i` variable. It shouldn't matter that `i` is in the file name since that would just make the file name string `../images/Slide0.png`, which could be a valid file. – helllomatt Oct 03 '14 at 19:12

Trouble with changing image src content

4 Answers4