Javascript function throwing errors

Question

First off, I am not fluent in JavaScript whatsoever. I have scrambled together this function to pull some stats and apply them as html strings to the relevant elements using JSON. Sometimes it works and sometimes it doesn't.

AFAIK, the function should wait 3s before doing anything and then repeat the function over and over every 2s (correct?).

var userGameStats = setTimeout(function () {
    $.getJSON('/id/stats', function (data) {
        // Pull the stats
        var userWinningBets = data.winningBets,
        userLosingBets = data.losingBets,
        userTotalBets = data.totalBets,
        userStreak = data.streak,
        userBestStreak = data.bestStreak;

        // Apply stats to elements
        $('#stats_won span').text(userWinningBets);
        $('#stats_lost span').text(userLosingBets);
        $('#stats_total span').text(userTotalBets);
        $('#stats_ratio span').text((userTotalBets > 0) ? ((userWinningBets / userTotalBets) * 100).toFixed(1) + '%' : "0%");
        $('#stats_streakbest span').text(userBestStreak);
        $('#stats_streak span').text(userStreak);
    });

    userGameStats();
    setInterval(userGameStats, 2000);
}, 3000);

I am getting this error (in the console):

Uncaught TypeError: Property 'userGameStats' of object [object Object] is not a function
(anonymous function)

How do I solve this? Is there a better, more correct way that I can format the syntax?

Answer 1

In your case userGameStats is the value returned by setTimeout() which is a reference to the created timer(a int value), that is the reason for the error.

It should be

var userGameStats = function () {
    $.getJSON('/id/stats', function (data) {
        // Pull the stats
        var userWinningBets = data.winningBets,
            userLosingBets = data.losingBets,
            userTotalBets = data.totalBets,
            userStreak = data.streak,
            userBestStreak = data.bestStreak;

        // Apply stats to elements
        $('#stats_won span').text(userWinningBets);
        $('#stats_lost span').text(userLosingBets);
        $('#stats_total span').text(userTotalBets);
        $('#stats_ratio span').text((userTotalBets > 0) ? ((userWinningBets / userTotalBets) * 100).toFixed(1) + '%' : "0%");
        $('#stats_streakbest span').text(userBestStreak);
        $('#stats_streak span').text(userStreak);
    });
}

setTimeout(function(){
    userGameStats();
    setInterval(userGameStats, 2000);// once started repeat every 2 seconds
}, 3000); //first time wait for 3 seconds

Answer 2

You can assign a name to the function inside the the initial setTimeout. You can then refer to this function in a new setTimeout inside the function.

    setTimeout( function userGameStats() {
    $.getJSON('/id/stats', function (data) {
        // Pull the stats
        var userWinningBets = data.winningBets,
        userLosingBets = data.losingBets,
        userTotalBets = data.totalBets,
        userStreak = data.streak,
        userBestStreak = data.bestStreak;
        // Apply stats to elements
        $('#stats_won span').text(userWinningBets);
        $('#stats_lost span').text(userLosingBets);
        $('#stats_total span').text(userTotalBets);
        $('#stats_ratio span').text((userTotalBets > 0) ? ((userWinningBets / userTotalBets) * 100).toFixed(1) + '%' : "0%");
        $('#stats_streakbest span').text(userBestStreak);
        $('#stats_streak span').text(userStreak);
    });
    setTimeout( userGameStats , 2000 );
}, 3000);