Digital Workshop

Can't get a scripted while loop to work (works in preview but not when published). Wonder if it is unsupported in HTML 5 or HTML 5 needs a different method to achieve this?



So far, having been trying to substitute setInterval(function(), time in milliseconds), using a JavaScript object, but no success. When published as HTML5, doesn't run the function.

I think this infinite loop prevents other actions from running or crashes the browser in some other way?

Think about JavaScript as a teller at the bank. The browser is the bank, there is only one teller and everything that your program needs to do is broken down and given to each customer.

When the customer with the 'while' command reaches the front, the teller is stuck with that customer until the 'while' ends (which it doesn't). You could give the while customer lots and lots of things to do and it may appear that something is happening but anything else in the queue and anything the bank (browser) tries to add to the queue will never reach the teller and the bank (browsers) grinds to a halt.

Some browsers, like Firefox - will warn you when this happens - others will simply kill the script silently.

In real terms, this presents a very understandable problem. All Opus HTML5 programs are updated at very regular intervals - this allows things like on screen variables to change. If the browser calls the update variable function (using setInterval), it should be added to the queue and very, very, very quickly reach the front and be executed - except it never will because the queue is stuck indefinitely with the while loop.

With the single threaded nature of JS, infinite loops are bad - but it's wider than that - any loop that chews up a lot of execution time in one hit is bad because nothing else is processed - which is why it's better to break complex JS down into small chucks. If we go back to the bank, if each customer has ten transactions, but we break it down so that only one transaction is processed per customer and then they go back into the queue - the customers will move through the queue a lot quicker - even though it will take each customer longer to complete the entire ten transactions.

Of course, breaking things down into smaller chunks isn't always possible or practical which is why we have things like HTML5's web workers - that allow really complex JavaScript calculations to take place in a different thread and send the result back.


If something needs to happen regularly, then yes, the setInterval is a good choice. If I attach the follow code to an Opus JS action, then when triggered it would run the function every 1000ms.



Basically, it's the bank that handles the setInterval and every 1000ms, the bank adds the function call to the queue. Two important things to remember, what the bank does and what the teller does are two different things - all the events - such as timers, mouse clicks and movement, key press, etc are happening all the time and are handled by the browser (bank). When one of these events triggers an action - that is added to the teller's queue and are executed in sequence.

The second thing to remember is that because the browser (bank) adds the action to the queue, there may already be things in the queue - so if your setInterval is too fast or the queue is very busy, your action might not occur exactly every Xms. It's more complicated that this and each browser works differently, but on the whole the bases of the above is good practice.

The last thing to say,

setInterval(updateConsole,1000);

setInterval is a function of the window object. This means that by calling updateConsole - it's going to look for that function under the window object - IE window.updateConsole.

This is great if you've included it in the Opus JS action or attached an external script - but if your function is part of an OpusScript it will not find it.

You can still do it but you need to locate and specify the correct path of your function - for example, if the Opus function is on a script object on the current page - you can use:



</mack>

Very helpful explanation, Mack.

Thank you.

Hi Mack/Stephen,
I tried to implement your instructions Mack in a simple imp attached but cant get it to work. Any thoughts would be appreciated.
Cheers
Paul

You're trying to run Opus functions from JavaScript - this is the code in your JS Object:



The Rotate function belongs to Opus and is not available to JavaScript. You need to place the RotateBox() function into a standard Opus script object. Then because you want the setInterval function (which does belong to JavaScript) to call the RotateBox function (which is now part of Opus) - you'll need to tell it where to find the function. In this case, you can use:



</mack>

Cheers Mack works a treat. I have tried clearInterval((_DWPub.m_currentPage.RotateBox,100) on the mouse click to stop the rotation but to no avail. Any help would be welcome.
Cheers
Paul

You have to assign the setInterval to a variable and then use clearInterval to clear the variable.

</mack>

Hi Mack,
Thanks for the reply.
I have used....

Mouse down
var stop=setInterval(_DWPub.m_currentPage.RotateBox,1000);

Mouse click
clearInterval(stop);

Does not work - Is this the right approach?
Cheers
Paul

Lose the 'var' - but be warned that you're adding a variable to the window object so keep the naming unique.

Also, look into using the browser's console - it would have flagged the error.

</mack>

Cheers again Mack,
All works fine in firefox apart from the 'new line' code but not ie. This is the first time I have used the javascript. Any thoughts would be appreciated. I have attached a small imp.
Thanks
Paul

Not sure what I'm looking for - it seems to be working fine in IE11.

</mack>

Hi Mack
I have tried on 2 pc with ie 11 and the flashing does not work they just stay on. Is there a simple way to get wait and while working in html5. Its so easy to do in Opus .exe. Is the new line(\n) working for you as well in ie.
Cheers
Paul

Strange update,
In ie 11 when I click on flash button lights come on but don't flash. I went to ie 11 settings and opened about ie to check version, when I clicked on close the lights started flashing. Tried the same with internet options and same result. Any thoughts Mack. Just tried a laptop with ie11 and it worked fine. At a loss.
Cheers
Paul

I'm just glad that as we move towards HTML5 that IE is being phased out and Spartan phased in.

As for an easier way, yes Opus is full actions and events that could hide / show an object repetitively. Some possible ideas:

1. You can run an animation event continuously and the event can be stopped and re-run as necessary.

2. You can use a ticker action with control logic (IF-THEN) to repeat & control a set of actions.

3. You can use a time-line on continuous loop and stop & start as necessary.

</mack>

Hi Mack,
Used the timeline and it worked fine. Do you think it is better to use opus actions instead of script when exporting to html5.
Thanks again
Paul