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" />

Knob 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调用或拨打一次调用值：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
     }
});

Answer 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]

jQuery Knob，仅在最后一次更改/发布时提交

2 个答案: