Javascript Jquery/js，从textfield获取一个值，并使用ajax将其发送到服务器

我需要使用这个插件：能够使用“鼠标滚轮”值增量

这个插件提供了一个onStep函数，每次值递增时，它都会运行我自己的函数。现在只需向ajax函数发送新值就非常简单了，但这意味着数百个，甚至数千个POST请求，大量mysql插入/更新，这将非常混乱

我正在尝试实现某种计时器，它将从textfield中获取值，等待1000毫秒，然后将其发送到服务器，每当用户需要滚动更多值时，它将取消上一次超时并再次开始计数

这带来了两个问题，首先-如果用户滚动一个文本字段，然后立即开始滚动下一个文本字段，则不会发送以前的文本字段数据，因为新字段将控制计时器

第二，不管我怎么做，我都无法得到这些值，这可能很容易修复，我只是想知道如何

所以我希望有人能在这方面帮助我，因为我被踩死了

$(".basket_input").jStepper({onStep:function(){ajaxSleeper(this.value, this.id)}});

var timer = 0;

function ajaxSleeper(val1,val2){
clearTimeout(timer);

timer = setTimeout(function(){
ajaxUpdate(val1,val2);
//alert('updated!');
}, 3000);

}

HTML

---

两种可能的解决方案

如果您还没有看到underline.js，您应该。他们有一个

\uu0.throttle（）

，它能做你想做的事情，还有无数其他有用的事情

如果你不想使用另一个库，你就接近了

var timer;

var fireOffMyRequest = function()
{
    // ... FIRE EVERYTHING! ...
};

var somethingThatGetsFiredOften = function()
{
    clearTimeout(timer);
    timer = setTimeout(fireOffMyRequest, 4000);
};

限制为4秒；您可以更改4000以反映您想要的油门限制

编辑：我忘了解决您的计时器问题。将计时器存储到HTML元素上：

$(this).data('timer', timer);

---

最简单的方法是使用

$.data

设置计时器并继续使用实际对象的上下文

jQuery

---

为什么不直接在

blur

event上发送请求呢？@Demian很好的观点，因为这样简单的东西（它看起来像一个数量输入框，imo）在blur/onunload上启动它是有意义的。只有在这个框中输入了大量信息，并且它是一个自动保存类型的功能时，我才认为这是有用的。不过，已经有足够多的插件用于此目的了。：）现在我已经更仔细地研究了您的代码，它实际上应该可以工作了。您确定没有变量命名冲突吗？使用“ajaxSleeper.call（this）；”实际上会使用jStepper对象，而不是jq选择器。这就是为什么我无法获取任何值来传递给我的函数。嗯，对不起，但它仍然不适用于我。它现在确实使用了正确的对象，但检索值不起作用。是否要使用输入框中的值更新，然后使用该元素的id，即

id=“blah”

？ajaxUpdate可能有问题？

$(this).data('timer', timer);

var $basket_input = $(".basket_input");
$basket_input.jStepper({
    onStep: function() {
        ajaxSleeper.call($basket_input.get(0)); // Call the function using the
                                    // element as the context
    }
});


function ajaxSleeper() {
    // Get any timer that could be set for this element
    var thisTimer = $(this).data('timer');
    
    // Clear it if there is one
    if (thisTimer) clearTimeout(thisTimer);
    
    // We need this as the context in setTimeout will change to "window" object
    // Yet we want to reference this object in the setTimeout
    var $that = $(this);
    
    $(this).data('timer', setTimeout(function() {
        ajaxUpdate($that.val(), $that.attr('id'));
        //alert('updated!');
        }, 3000);
    );
}