Generate random number every x seconds and display it

Question

Inside my App I have a sort of bottom bar Always shown, where I have a div with an h1, and a button. Everytime I click the button I coded and animation that do change the text of the h1 with a random number. Till here everything works fine.

My goal is to make this thing WITHOUT pressing a button, but just every x seconds during all the App execution. I tried to use "setInterval(func, ms);" I didn't get any error, but it just did it one time.

I think that my error is "where to put" the code. I don't understand this. So, I tried to put the code on the event handler of my button just to see if it works, but it did it one time anyway. I need that this function continues to be executed while the users do something else... It's like a clock inside an app: it should work continuosly while you do something else.

My function code:

function fraseCasuale(sel) {
    var i = 1 + Math.floor(Math.random() * (groupedItems.length-1));
    var oggetto = groupedItems.getAt(i);

    if (sel === 1) {
        document.getElementById("frasecasuale").textContent = oggetto.frase;
        document.getElementById("autore").textContent = oggetto.nome;
        document.getElementById("genere").textContent = oggetto.genere;
    } else {
        document.getElementById("frasecasuale2").textContent = oggetto.frase;
        document.getElementById("autore2").textContent = oggetto.nome;
        document.getElementById("genere2").textContent = oggetto.genere;
    }
}

And then how I call it, for example:

setInterval(fraseCasuale(1), 5000);

My application is based on the grid template of Visual Studio 2012 for Windows Store aps. I added the bar I was talking above into "default.html", which is the container of the other pages.

Answer 1

The problem in your code is that you aren't passing a function to setInterval, you are passing the ONE TIME result of the function call fraseCasuale(1), so the result of that function is what is being passed to setInterval.

Since you want to pass a parameter to it, setTimeout lets you specify arguments after the function pointer and timeout interval, such as:

setInterval(fraseCasuale,5000,1);

If you are doing this in a defined 'Page' you'd do something like this in home.js

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            setInterval(this.fraseCasuale, 1000, 656);
        },

        fraseCasuale: function (sel) {
            console.log(sel);
            var i = 1 + Math.floor(Math.random() * (4 - 1));
            var element = document.getElementById("updateMe");
            element.textContent = i;
        }
    });

or if just using a default.js then you can throw your code there in app.ready, right above for ex. app.oncheckpoint (order doesn't actually matter above or below any function, just providing a place to show you an example)

So in default.js:

  app.onready = function (args) {
        //1 is a placeholder for your parameter
        setInterval(fraseCasuale,5000,1);
    };