How to make an infinite loop inside instance to check some features in JavaScript?

Question

I've prepared different prototypes for my project, which have different roles. One is for determination aims, other for UI update and else...

I've got an issue in one part of it:

GC3D.Application.prototype.checkForPendingTextures = function() {
    this.updatePendingTextures().then( function( data ) {
        console.log( data );
    });
    window.setTimeout( this.checkForPendingTextures, 1000 );
};

Here, I'm trying to make an infinite check inside the function checkPendingTextures() of instance Application, which is communicating with other function updatePendingTextures().

I want a separate logic:

• One function is checking the status
• Second one is updating something, if there is a need for update

I think, it's a rather normally desire... As you can see I'm also making promises/futures pattern, because it's a way for making asynchronous operations in JavaScript.

The update function looks like:

GC3D.Application.prototype.updatePendingTextures = function() {
    var defer = new GC3D.Defer();
    if ( this.temporaryTiles.length > 0 ) {
        this.temporaryTiles.forEach( function( item ) {
            if ( item !== undefined && item !== null ) {
                var mesh = this.getMeshByMapId( item.asyncId );
                mesh.material = new THREE.MeshBasicMaterial({
                    map: THREE.ImageUtils.loadTexture( item.ImagePath )
                }), 
                defer.resolve( item );
            }
        }.bind( this ) );
    }
    else defer.reject( 'Tiles storage is empty.' );
    return defer.promise;
};

If you want to view the full source, it'a available here: http://pastebin.com/s8ed1BFq

PS:

this is losing on the second call from Timer... it's a point of failure... I know, that a solution for not losing this is binding via JS function bind(), which I've already use in code as you're able to see, but exactly in this situation I'm rather confused how to deal with the this.

I've tried to do the next:

window.setTimeout( this.checkForPendingTextures.bind( this ), 1000 );

But it didn't help... :(

Answer 1

To set the this context you can always use the call or apply functions.

However, you can also set a local variable equal to the desired this context, this way you can create a handler function that invokes checkForPendingTextures from the correct object.

// Set local variable to reference 'this' context
var self = this;

window.setTimeout(function () {
   self.checkForPendingTextures();
}, 1000);

This ensures that we are calling the checkForPendingTextures using the correct this context. Otherwise, the direct invocation of a function in JavaScript will always have a this context pointing to the window object.