Javascript timer as buffer

Question

I have a slider which is sending its value to a web server by using the following line of code:

window.location = "http://172.20.2.1:83/trigger/1?" + value;

This code is within my TestSlider(value) function which is called from the onchange event from a range.

The problem is, of course when I move the slider, I am sending vast amounts of data to the web server.

I would like to create a buffer which sends the most recent value. I have created a timer function which for the moment I am happy for it to tick once a second. It should take the public variable Value and just for the moment write it to the log.

The problem I am seeing however is that it is still writing massive amounts of data to the log, so it will of course crash my web server.

Here is my javascript:

    //Put a timer in to work as buffer. This should stop the lpc crashing. I think its 
    //as a result of to much data. 
    var c=0;
    var t;
    var timer_is_on=0;


    // Holy Smoke Hacked...liked a pro! 
    calculateHost();
    var ip = getControllerIP();
    var triggerNumber = 1;
    var Value;




    function timedCount()
    {


        //console.log("Timer Ticked: " + c + "URL : " + url); //Write tick value and url to log.
        c=c+1; //Add 1 to tick value.
        t=setInterval("timedCount()",10000); //Set the old interval. 

        console.log(c);

    }

    function doTimer()
    {

          timer_is_on=1;
          timedCount();


    }   


    function testSlider(value)
    {

        var url = (ip + "/trigger/" + triggerNumber + "?" + value);

        //Removed because its it would be better to see when the timer is executing. 
        //console.log(url);

        Value = value;


        //Removed because we need a buffer. 
        //window.location = "http://172.20.2.1:83/trigger/1?" + value;

    }

Why don't you wait until the sliding is done and send up that final value? Or only send up a value every x seconds. — epascarello
– epascarello, Commented Apr 1, 2011 at 11:55

Martin Jespersen · Accepted Answer · 2011-04-01 11:55:14Z

1

The solution is called debouncing.

The idea is to only react to the last of a series of repeating events.

Read all about debouncing events here: http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/

An alternative solution is to throttle the events and thus only react to the events every set interval.

You can use the following function prototype extension to throttle event handlers, look for debouncing logic in the above link:

Function.prototype.throttle = function throttle(delay) {
    var func = this, timeOfLastExec = 0, execWaiting = false;

    return function throttled() {
        var context = this, args = arguments, timeSinceLastExec = new Date().getTime() - timeOfLastExec;

        function exec() {
            execWaiting && clearTimeout(execWaiting);
            execWaiting = false;
            timeOfLastExec = new Date().getTime();
            func.apply(context, args);
        }

        if (timeSinceLastExec >= delay) {
            exec();
        }
        else if (!execWaiting) {
            execWaiting = setTimeout(exec, delay - timeSinceLastExec);
        }
    };
};

answered Apr 1, 2011 at 11:55

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Raynos Over a year ago

Extending native prototypes is to be avoided. For this I would use a 3rd party library to emulate throttle for example underscore.

Mike James Over a year ago

I havn't used your code but have now used throttling. This along with a very simple if statement to check if the value changed as reduced the amount of traffic. Thanks.

Martin Jespersen Over a year ago

@Raynos: You'd use a library for something this simple? you should learn to extend prototypes instead, your life would be better ;)

Raynos Over a year ago

@MartinJespersen Don't extend native prototypes. You break code that makes assumptions about native objects.

Martin Jespersen Over a year ago

@Raynos: Yup thats what people say. I've yet to have any breakage happen in 10 years of using extensions however, so excuse me to not taking it seriously.

|

Bojangles · Accepted Answer · 2011-04-01 11:40:29Z

0

I think a better way to do this is to use the onMouseUp event - this will only send data to the server when the slider is released, thereby only sending one request.

answered Apr 1, 2011 at 11:40

Bojangles

102k50 gold badges175 silver badges209 bronze badges

2 Comments

Mike James Over a year ago

I need to get the values as the slider is moving. It will be trigging the intensity of some lights, so to have it call the function onMouseUp would mean the lights flash on or off.

Bojangles Over a year ago

Ah ok my bad. In that case, maybe set up a setInterval() to capture the slider's value every 100ms or so?

Guffa · Accepted Answer · 2011-04-01 11:54:15Z

0

The problem with your timer is that you are starting anothering timer in the handler for the timer event. After the first round you have two timers, then four, eight, 16, 32, 64, 128, 256, 512, and so on... After not so very long you will have more timers than the browser has time to hande, all sending data to your server (if you had implemented that yet).

answered Apr 1, 2011 at 11:54

Guffa

703k112 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

Javascript timer as buffer

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related