How do I find out how many times a function is called with javascript/jquery?

Question

Perhaps an odd question but here it goes: I have a function which I call periodically and within that function I need to know which iteration I'm in, or how many times the function has been called. A simplified version of the problem:

jQuery( document ).ready( function(){
    setInterval( "myFunction()", 3000 );
});

function myFunction()
{
    alert( "I have been called X times" );
}

So, how do I figure out the X in the above code?

Answer 1

Easy version: make a global variable like in codeling's answer. The problem - if some other code also defines a global variable with the same name, you're both in trouble.

Easy extended version - give the variable a crazy name that nobody will ever use: calledTimesED7E69A7B141457CA8908A612E3D7A3A

Clever version: append that variable to an existing global variable. Remember - everything's an object in Javascript!

$(function(){ setInterval(myFunction, 3000); });

function myFunction()
{
    myFunction.calledTimes++;
    alert( "I have been called " + myFunction.calledTimes + " times" );
}
myFunction.calledTimes = 0;

Traditional version: use scoping to hide that variable.

$(function()
{
    var calledTimes = 0;
    setInterval(function()
    {
        calledTimes++;
        alert( "I have been called " + calledTimes + " times" );
    }, 3000); 
});

This hides "myFunction" though, so let's try again with a tricky kind of scoping:

var myFunction = null;
(function()
{
    var calledTimes = 0;
    myFunction = function()
    {
        calledTimes++;
        alert( "I have been called " + calledTimes + " times" );
    } 
})();

$(function () { setInterval(myFunction, 3000); });

... and there are a zillion other ways you would hide that variable with scoping. Just pick your favorite.

Answer 2

You could simply use a global variable, which is increased each time you call the function:

var myFuncCalls = 0;

function myFunction()
{
    myFuncCalls++;
    alert( "I have been called " + myFuncCalls + " times" );
}

As soon as your code gets a little more complex (or if you use a lot of other libraries), you should, however, consider using scoping as shown in the other answers here (best explained in the one by Vilx).

Answer 3

Here's another interesting solution that doesn't use an external variable. The best part about this is you can leave any pre-existing functions untouched and call them as you would normally. That means if you're attempting to "tap in" to an function in an existing library, this will work very well for you. It adds an unobtrusive counter and allows you to continue calling existing functions normally; even with arguments!

// no js library required

// pre-existing function
var a = function(){
    console.log("pre-existing function function");
    console.log("arguments:", arguments);
};

// add counter func
var addFnCounter = function(target){
    var swap = target;
    var count = 0;
    return function(){
        swap.apply(null, arguments);
        count++;
        console.log("func has been called " + count + " times");
        console.log("\n");
    };
};

// usage
a = addFnCounter(a);

// call a() as you would normally
a();
a(1,2,3);
a('hello', 'world');

// using your setInterval example
setInterval(a, 3000);

Output

pre-existing function function
arguments: []
func has been called 1 times

pre-existing function function
arguments: [1, 2, 3]
func has been called 2 times

pre-existing function function
arguments: ["hello", "world"]
func has been called 3 times

setInterval output

pre-existing function function
arguments: []
func has been called 4 times

pre-existing function function
arguments: []
func has been called 5 times

pre-existing function function
arguments: []
func has been called 6 times

See it working here on jsfiddle

Answer 4

You'll have to use a closure. Normally you would use a static variable. in Javascript it would look something like:

jQuery( document ).ready( function(){
    setInterval( myFunction, 3000 );
});

var myFunction = (function(){
    var count = 0;
    return function(){
         count++
         alert( "I have been called " + count + " times");
    }
})();

Demonstration: http://jsfiddle.net/MZQ83/2/

Answer 5

A static variable is cleaner and it won't pollute your outer scope either, compared to a closure or a decorator as in other answers.

var foo = function(){
    alert( ++foo.count || (foo.count = 1) );
}


// test
function callTwice(f){ f(); f(); }
callTwice(foo)                  // will alert 1 then 2

or

callTwice( function bar(){           
    alert( ++bar.count || (bar.count = 1) );
});                             // will alert 1 then 2

the second one is a named anonymous function. And note this syntax:

var foo = function bar(){ /* foo === bar in here */ }