Question

We have created an application using Dojo with an clock on the UI. But sometimes the application UI just hung-up there and the clock just stopped. Guessing the JS engine just stopped because the clock is driven by javascript code.

Not sure following code causes memory leak and then causes the hang-up issue. We are using recursively setTimeout invoke to implement the clock.

dojo.declare("xxx.xxx.HomepageHeader", [dijit._Widget, dijit._Templated],
{
widgetsInTemplate: true,
_time :'',
dateUtil: null,

// ....
// ....

prefix :function (value, p)
{
    return (value < 10) ? p + value : value;
},

updateTime :function ()
{
    var d = new Date();
    var _this = this;
    var t = [_this.prefix(d.getHours(), '0'), _this.prefix(d.getMinutes(), '0'), _this.prefix(d.getSeconds(), '0')].join(':');
    _this._time.innerHTML = t;
    _this.dateInfo.innerHTML = this.dateUtil.format(d, "yyyy/MM/dd") + " &nbsp;|&nbsp " + this.dateUtil.format(d, "EEE");
    window.setTimeout( function(){_this.updateTime();}, 100);
}

// ....
// ....
}

Noticed that within the class, the method updateTime used window.setTimeout to recursively invoke itself to update time text on the UI.

Is there any memory leak issue here? If the answer is no, is there any possible issue caused the hang up issue?

Thanks!

Answer 1

This isn’t really recursion because setTimeout() schedules the next call to updateTime() for some time in the future and then the current updateTime() actually completes. So, there is no build-up of the stack frame and thus it’s not really recursion. Also, I don’t see any reason for a memory leak here.

The scheme you have should be OK and it used often, but you may want to do it less often than every 100ms just to leave more CPU cycles for other things going on the browser.

If you see the clock stop, it is because the JS engine is stuck or looping, but it’s probably stuck in code somewhere else other than the actual clock code.