javascript - jQuery Knob，仅在上次更改/发布时提交

Question

我正在使用 anthonyterrien 的 jQuery Knob，步长设置为 20。我想将旋钮的值提交给服务器。问题是，每次用户使用右键单击或左键单击移动旋钮时都会调用更改功能(如果使用单击，则仅调用释放一次)，并且每次用户使用旋钮上的滚动时都会调用释放。考虑到用户正在使用控件，我想以某种方式最小化或可能只对服务器进行一次 ajax 调用。

这是旋钮 html:

<input class="knob" id="knob_imgid1" data-entryid="knob_imgid1" data-angleOffset=-125 data-angleArc=250 data-step="20" data-displayInput=false data-width="100%" data-fgColor="#428BCA" data-skin="tron" data-thickness=".1" value="20" />

旋钮jquery:

$(".knob").knob({ 
        change: function (value) {
            value = parseInt(value, 10); 
        }
        release: function (value) {
            value = parseInt(value, 10); 
        }
});

我想要的结果:

$(".knob").knob({ 
        change: function (value) {
            //make an ajax call only the last time when this function was called
        }
        release: function (value) {
            //make an ajax call only the last time when this function was called
        }
});

通话结果: /image/RS7S4.png 1

最终我想尽量减少 ajax 调用或调用一次将 value:40 发送到服务器(根据图像结果)

Answer 1

您可以测试当前值是否=最终值，将finalValue存储在您的html元素中:

<input class="knob" .... data-finalValue="20" />

并在 Javascript 中获取它:

$(".knob").knob({ 
     change: function (value) {
        var finalValue = parseInt($(this).data("finalValue"));
        if (value === finalValue)
             // Last call => Ajax call
     }
});