1

我正在使用 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 发送到服务器（根据图像结果）

4

2 回答 2

0

您可以测试当前值是否 = 最终值，将 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
     }
});
于 2014-09-05T11:45:41.050 回答
0

谢谢大家，您的快速回复。我创建了一个解决方案（在@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]

于 2014-09-05T13:51:59.610 回答