setTimeout in methods of multiple objects of the same type

Question

I need help with the use of "setTimeout" in the methods of the objects of the same type. I use this code to initiate my objects:

    function myObject(param){

        this.content = document.createElement('div');
        this.content.style.opacity = 0;
        this.content.innerHTML = param;

        document.body.appendChild(this.content);

        this.show = function(){
            if(this.content.style.opacity < 1){
                this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1);
                that = this;
                setTimeout(function(){that.show();},100);
            }
        }

        this.hide = function(){
            if(this.content.style.opacity > 0){
                this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1);
                that = this;
                setTimeout(function(){that.hide();},100);
            }
        }
    }

Somewhere I have 2 objects:

    obj1 = new myObject('Something here');
    obj2 = new myObject('Something else here');

Somewhere in the HTML code I use them:

    <button onclick="obj1.show()">Something here</button>
    <button onclick="obj2.show()">Something else here</button>

When the user presses one button, everything goes OK, but if the user presses one button and after a short time interval he presses the other one, the action triggered by the first button stops and only the action of the second button is executed. I understand that the global variable "that" becomes the refence of the second object, but I don't know how to create an automatic mechanism that wouldn't block the previously called methods.

Thank you in advance and sorry for my English if I made some mistakes :P

score 1 · Answer 1 · answered Aug 08 '11 at 12:26

1

If you need something cancellable, use window.setInterval instead of setTimeout. setInterval returns a handle to the interval which can then be used to cancel the interval later:

var global_intervalHandler = window.setInterval(function() { ... }, millisecondsTotal);

// more code ...

// later, to cancel this guy:

window.clearInterval(global_intervalHandler);

So from here I'm sure you can use your engineering skills and creativity to make your own self expiring operations - if they execute and complete successfully (or even unsuccessfully) they cancel their own interval. If another process intervenes, it can cancel the interval first and hten fire its behavior.

answered Aug 08 '11 at 12:26

Brian

2,772
15
12

1

Well, but setTimeout also returns a handle which you can use to cancel call by using clearTimeout. https://developer.mozilla.org/en/window.clearTimeout – DanNsk Aug 08 '11 at 12:37
You know, I don't know why, but in all my years using JavaScript I've never looked for this - I've always used intervals for cancelability. +1. Either way - same concepts apply. Capture the handle, ensure it's available in a scope outside of the operation, and use the handle to cancel if needed. – Brian Aug 08 '11 at 12:41

score 0 · Accepted Answer · edited May 23 '17 at 12:04

There are several ways to handle something like this, here's just one off the top of my head.

First of all, I see you're writing anonymous functions to put inside the setTimeout. I find it more elegant to bind a method of my object to its scope and send that to setTimeout. There's lots of ways to do hitching, but soon bind() will become standard (you can write this into your own support libraries yourself for browser compatibility). Doing things this way would keep your variables in their own scope (no "that" variable in the global scope) and go a long way to avoiding bugs like this. For example:

function myObject(param){

    // ... snip

    this.show = function(){
        if(this.content.style.opacity < 1){
            this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1);
            setTimeout(this.show.bind(this),100);
        }
    }

    this.hide = function(){
        if(this.content.style.opacity > 0){
            this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1);
            setTimeout(this.hide.bind(this),100);
        }
    }
}

Second, you probably want to add some animation-handling methods to your object. setTimeout returns handles you can use to cancel the scheduled callback. If you implement something like this.registerTimeout() and this.cancelTimeout() that can help you make sure only one thing is going on at a time and insulate your code's behavior from frenetic user clicking like what you describe.

score 0 · Answer 3 · answered Aug 08 '11 at 12:33

0

Do you need that as global variable ? just change to var that = this; you will use variable inside of the function context.

answered Aug 08 '11 at 12:33

DanNsk

890
12
26

setTimeout in methods of multiple objects of the same type

3 Answers3