Question

我有一个滑块，它使用以下代码行将其值发送到Web服务器：

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

此代码位于我的TestSlider（value）函数中，该函数是从范围的onchange事件中调用的。

问题是，当我移动滑块时，我正在向Web服务器发送大量数据。

我想创建一个发送最新值的缓冲区。我已经创建了一个计时器功能，目前我很高兴它能够每秒打勾一次。它应该采用公共变量Value并暂时将其写入日志。

然而，我看到的问题是它仍在向日志写入大量数据，因此它当然会使我的Web服务器崩溃。

这是我的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;

    }

Answer 1

该解决方案称为去抖动。

这个想法只是对一系列重复事件的最后一个做出反应。

在此处阅读所有关于debouncing事件的信息：http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/

另一种解决方案是限制事件，因此只对每个设定间隔的事件作出反应。

您可以使用以下函数原型扩展来限制事件处理程序，在上面的链接中查找debouncing逻辑：

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);
        }
    };
};

Answer 2

我认为更好的方法是使用onMouseUp事件 - 这只会在释放滑块时将数据发送到服务器，从而只发送一个请求。

Answer 3

您的计时器的问题在于您正在计时器事件的处理程序中启动另一个计时器。在第一轮之后，你有两个计时器，然后是四个，八个，16个，32个，64个，128个，256个，512个等等......不久之后你会有更多的计时器，而不是浏览器有时间进行处理，所有发送数据到你的服务器（如果你已经实现了）。

Javascript计时器作为缓冲区

3 个答案: