jQuery 旋钮，仅在最后一次更改/发布时提交答案

【问题标题】：jQuery Knob, Submit only on last change/releasejQuery 旋钮，仅在最后一次更改/发布时提交
【发布时间】：2014-09-05 11:21:28
【问题描述】：

我正在使用 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
        }
});

通话结果： http://i.stack.imgur.com/RS7S4.png 1

最终我想最小化 ajax 调用或调用一次以将 value:40 发送到服务器（根据图像结果）

【问题讨论】：

你的 ajax 调用在哪里？
这是我第一次使用stackoverflow，请忽略我的错误。
40和你的问题有什么关系？值超过 40 后是否要向服务器发送调用？您想在用户停止并且大于 40 后发送该值吗？等
@drneel .. 如果可能，在最后一次调用更改/释放函数时。（根据发布的图像 40 是最后一个值，这应该发送到服务器）
@experimentalcoder 我不确定每次滚动旋钮时都会调用释放函数是什么意思。我只看到调用一次的版本

标签： javascript jquery html ajax jquery-knob

【解决方案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
     }
});

【讨论】：

那行不通。 $(this).attr("value") 未定义 & $(this)[0].val() 等于用户开始时的值
在这种情况下，最好的方法是在已知输入中添加一个数据属性，例如：（我编辑了我的帖子）

【解决方案2】：

感谢大家的快速回复。我创建了一个解决方案（在@Adriien M 的帮助下），它使用超时函数最小化了 ajax 调用

如果有比这更好的解决方案，请告诉我。

代码如下：

var sec3lastvalue = 0;
var sec5lastvalue = 0;

function sec5functioncheck(passedvalue) {
    console.log("5Sec Check : Value=" + passedvalue);
    sec5lastvalue = passedvalue;
    if (sec5lastvalue === sec3lastvalue) {
        console.log("Make Ajax Call, Send:" + passedvalue);
    }
}

function sec3functioncheck(passedvalue) {
    console.log("3Sec Check : Value=" + passedvalue);
    sec3lastvalue = passedvalue;
}

var oldvalue = 0;
$(".knob").knob({ 
        release: function (value) {
           value = parseInt(value, 10);
           if (oldvalue != value) {
             setTimeout(function () {
                sec3functioncheck(value);
             }, 3000);
             setTimeout(function () {
                sec5functioncheck(value);
             }, 5000);
           }
           oldvalue = value; 
        }
});

结果如下： [http://i.stack.imgur.com/NtcXk.png]

【讨论】：