current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 4 down vote favorite

I like to know if there will be any performance issue if an xmlhttp object is created every time. For example, in the below code:

function currentTime(){
    var obj = null; 

    if(window.XMLHttpRequest){
        obj = new XMLHttpRequest();
    } else {
        obj = new ActiveXObject("Microsoft.XMLHTTP");
    }                                   

    obj.open("GET", "current_time.php", true);
    obj.send(null);                                 
    obj.onreadystatechange = function(){

        if(obj.readyState == 4 && obj.status == 200){
            var element = document.getElementById("current_time");
            element.innerHTML = obj.responseText;
        }                       
    };
}


setInterval("currentTime();", 1000);

or

var obj = null;                             
function createObj(){
    if(window.XMLHttpRequest){
        obj = new XMLHttpRequest();
    } else {
        obj = new ActiveXObject("Microsoft.XMLHTTP");
     }                                  
}

function currentTime(){
     obj.open("GET", "current_time.php", true);
     obj.send(null);                                    
     obj.onreadystatechange = function(){

        if(obj.readyState == 4 && obj.status == 200){
            var element = document.getElementById("current_time");
            element.innerHTML = obj.responseText;
        }                       
    };
}

createObj();
setInterval("currentTime();", 1000);

In the first example, the XMLHttpRequest object is created every time (1 sec).

In the second example, the object is created once.

share|improve this question
1  
You can call the timeout as setInterval(currentTime, 1000); to pass the function reference and avoid implicit eval. –  Scimonster Aug 17 at 13:31

1 Answer 1

up vote 2 down vote accepted

But the second version has problems also because the obj variable is in the global namespace. It might be a good idea to abstract this into a function which contains a reference to the XMLHttpRequest object, and avoids polluting globals as in the first example.

var CurrentTime = function() {
    this.requestObj = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    this.element = document.getElementById("current_time");
};

CurrentTime.prototype.get = function() {
    var self = this;
    this.requestObj.open("GET", "current_time.php", true);
    this.requestObj.send(null);                            
    this.requestObj.onreadystatechange = function() {
        if (self.requestObj.readyState == 4 && self.requestObj.status == 200) {
            self.element.innerHTML = self.requestObj.responseText;
        }                       
    };
};

var currentTime = new CurrentTime();
setInterval(currentTime.get.apply(currentTime), 1000);

You could also pass the location of the PHP file to this CurrentTime function for further abstraction, however I think this is good as is. The apply method is used to set the context of the method to the currentTime variable and not the window, so that you don't get TypeErrors. :)

share|improve this answer
    
Thanks, this is what i was looking for. –  Code Aug 18 at 20:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.