Question

我的Html标记是

<div id="price-range">
    <div class="padding-range"><div id="slider-range"></div></div>
    <label for="amount">Price:</label>
    <input type="text" id="amount" />
    <a href="#" class="button color">Filter</a>
</div>

我想用JQuery捕获值更改事件并执行AJAX帖子。我怎样才能做到这一点？最佳解决方案是以较小的延迟访问该值。

我的意思是Ajax帖子最终应该执行一次，而不是更改值

我尝试过没有成功的价值

$("#price-range").on("change", function () { console.log(this.value) });

更新

使用

成功启动滑块事件

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 500],
    slide: function (event, ui) {
        event = event;
        $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);
    }
});

$("#amount").val("€" + $("#slider-range").slider("values", 0) + " - €" + $("#slider-range").slider("values", 1));

现在的问题是如何添加去抖效果

Answer 1

要实现这一目标，您需要去抖动该功能。实现这一目标的简单方法如下：

var debounce;

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 500],
    slide: function (event, ui) {

        clearTimeout(debounce);

        debounce = setTimeout(function(){

            event = event;
            $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);

        }.bind(this), 500);
    }
});

这种架构确保console.log仅在输入在~500ms内没有改变时才会触发。

修改

我最初将去抖设置为150毫秒，但是如果你每次我建议更长的时间你都会发出一个AJAX调用。

Answer 2

确定。这个就行了。

$("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [0, 500],
        slide: function (event, ui) {
            event = event;
            $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);
        },
        stop: function (event, ui) {
            debugger;
            var path = "PageName.aspx/Method";
            $.ajax({
                url: path, type: "POST", cache: "false",
                dataType: "json", contentType: "application/json; charset=utf-8",
                data: "{'str1':'Some Temp String'}"
            });
        }
    });

如何使用JQuery捕获滑块更改值？

2 个答案: