CODEWITHSUNDEEP
javascriptjqueryhtml
Sphvn
Sphvn

Reputation: 5353

Set Javascript variable every n sec. When it's changed also create a json array of variable?

My variable of numbers updates every one second with mathrandom to some numbers like "14323121" I want to also every seccond save these to an array for say the latest 10 or so.

function EveryOneSec() {
    var numbers = math.Random(); // I want to create an array from this...
setTimeOut(EveryOneSec, 1000);
};

To bind "numbers" to an array: (Referencing to var numbers above) I want to create an array like below for say the 10 last updates?

{"numbers":["2021030213","32454253"]} // For Reigel..
//doesnt have to be key value pairs. just need the value in legit json.

Upvotes: 1

Views: 1344

Answers (2)

pr1001
pr1001

Reputation: 21962

What is wrong with the your approach? Just setup your variables outside of the function that is repeated and then JSON encode it.

var numbers = [];
var jsonString = "";

function EveryOneSec() {
  numbers.push(Math.random());
  jsonString = JSON.stringify({'numbers': numbers});
  setTimeout(EveryOneSec, 1000);
}

However, I think your task might be an excellent opportunity to use a custom event! You tagged your question jQuery, so you should check out its bind() method. Of course there are many tutorials on the topic.

var numbers = [];
var aPlaceholder = document.createElement("div");
aPlaceholder.bind("arrayUpdatedEvent", {'numbers': numbers}, arrayUpdatedHandler);

function arrayUpdatedHandler(event) {
  var jsonString = JSON.stringify(event.data);
  // do something with your JSON
}

function EveryOneSec() {
  // add number to array
  numbers.push(Math.random());
  // trigger custom event
  aPlaceholder.trigger("arrayUpdatedEvent");
}

// call every 1 second, store in var to be able to cancel it later
var myInterval = setInterval(EveryOneSec, 1000);

As you can see, there's a lot more code here. However, introducing a custom event gives you a lot of power, as now you have decoupled the the variable updating from the JSON creation. Furthermore, you can add additional listeners, perhaps to also log the updated array, and to insert additional steps between array update and JSON creation. For instance, EveryOneSec() could trigger a different event, verifyArrayEvent, and only if the array validates does it trigger arrayUpdatedEvent.

Update: From the comments to the question it looks like Ozaki isn't clear that they can access a previously defined variable within their timer function. By defining a variable outside of a function and then referencing it inside of the function without using var, which would create a new, local variable, you are creating a closure where what you do to the variable inside of the function will be available outside of it. As you probably noticed, I used this technique in both my examples.

Hope that helps.

Upvotes: 3

user180100
user180100

Reputation:

Here's a solution:

<html>
<head>
    <title>S.O. 3163764</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    // dump() borrowed from http://www.openjs.com/scripts/others/dump_function_php_print_r.php
    const REPEAT = 3 * 1000; // ms
    const TO_KEEP = 10; // numbers to be kept
    var gObject = { 'numbers': [] };

    /**
     * Function : dump()
     * Arguments: The data - array,hash(associative array),object
     *    The level - OPTIONAL
     * Returns  : The textual representation of the array.
     * This function was inspired by the print_r function of PHP.
     * This will accept some data as the argument and return a
     * text that will be a more readable version of the
     * array/hash/object that is given.
     * Docs: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
     */
    function dump(arr,level) {
        var dumped_text = "";
        if(!level) level = 0;

        //The padding given at the beginning of the line.
        var level_padding = "";
        for(var j=0;j<level+1;j++) level_padding += "    ";

        if(typeof(arr) == 'object') { //Array/Hashes/Objects 
            for(var item in arr) {
                var value = arr[item];

                if(typeof(value) == 'object') { //If it is an array,
                    dumped_text += level_padding + "'" + item + "' ...\n";
                    dumped_text += dump(value,level+1);
                } else {
                    dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                }
            }
        } else { //Stings/Chars/Numbers etc.
            dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
        }
        return dumped_text;
    }

    function everyNSec() {
        var number = Math.random(); 
        store(number);
        window.setTimeout(everyNSec, REPEAT);
    };

    function store(aNumber) {
        gObject.numbers.push(aNumber);

        while (gObject.numbers.length > TO_KEEP)
            gObject.numbers.shift();

        $("#dump").html(dump(gObject));
    }

    $(document).ready(function() {
        everyNSec();
    });
    </script>
    </head>
    <body>
        <pre id="dump">
        </pre>
    </body>
</html>

Tested on chrome 6.0.447.0 dev

Upvotes: 2

Related Questions