CODEWITHSUNDEEP
javascriptperformance
Joe
Joe

Reputation: 8042

Which has better performance in JavaScript? A variable bound to a jQuery.data property or a variable held in closure scope?

In the following code, I hold my variables t and hoverCalled in a closure scope. Would the performance be better if I held them in jQuery.data properties? I have heard that creating closure scopes is a bit expensive in terms of performance. However, I don't know if it worse than the alternatives.

hoverDelay = function(hoverIn,hoverOut) {

var t=null;
var hoverCalled=false;
return {
    hoverIn:function() {        
        t = setTimeout(function() {     
            //$(self).data('hoverCalled',true);
            hoverCalled=true;
            hoverIn();          
        }, 500);
        $(this).data('timeout', t);     
    },
    hoverOut:function() {   
        if (hoverCalled){
            hoverOut();
            hoverCalled=false;
        } else {
            //var t=$(self).data('timeout');
            //clearTimeout($(this).data('timeout'));        
            t&&clearTimeout(t);
        }                               
    }

};

};

Upvotes: 1

Views: 46

Answers (1)

monshq
monshq

Reputation: 343

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

Says JQuery documentation. So yes, if you care about perfomance, you'd better store values in JQuery.data(). Though, you are not likely to see any difference in small applications.

Also, DOM modifications can be pretty expensive. But again, if you are not building very big application, you'll hardly notice a difference. If you do, then I guess you should decide what's best judging from the code you have.

Upvotes: 1

Related Questions