jQuery滑块通过AJAX发送错误值

Question

我正在使用jQuery滑块插件。滑块的当前选定值应该用AJAX发送到服务器端脚本。

目前我有一个错误的行为。当前选择的值总是在用Ajax发送的值之前或之后的一个值。

例如：如果滑到值5/50，它将向服务器端脚本发送“6”而不是“5”。

我做了一把JS小提琴。只需在developers network选项卡下查看。

  // Slider Script

    $("#slider-vertical").slider({
        orientation: "horizontal",
        range: "min",
        min: 1,
        max: 50,
        value: 50,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
        },
    });
  
  $("#amount").val($("#slider-vertical").slider("value"));
  
  // Get Response
    $('#slider-vertical').on('slide', getResponse);
    getResponse(0);

    function getResponse() {
        let itemlevel2 = $("#slider-vertical").slider("value");

        ajaxManager.add({
            type: "GET",
            cache: "true",
            url: "itemscript.php",
            data: {
                "itemlevel": itemlevel2
            },
            success: function (data) {

            }
        });
    }
});

Answer 1

为了纠正这种行为，您可以使用stop事件仅在滑块停止移动时进行AJAX调用。这样做的另一个好处是，不会让您的服务器充斥着对滑块所移动的每个值的请求。试试看：

null

jQuery(function($) {
  $("#slider-vertical").slider({
    orientation: "horizontal",
    range: "min",
    min: 1,
    max: 50,
    value: 50,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
    },
    stop: getResponse
  });

  $("#amount").val($("#slider-vertical").slider("value"));
  getResponse(0);

  function getResponse() {
    let itemlevel2 = $("#slider-vertical").slider("value");
    console.log(itemlevel2);
    // AJAX here...
  }
});

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
  width: 100%;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header {
  border: 1px solid #444 !important;
  background: none !important;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
  background-color: #353232;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
  background-color: #817373!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<p>
  <label class="item-slider" for="amount">Stufe:</label>
  <input class="item-slider" readonly id="amount">/
  <input class="item-slider" readonly id="amount2" value="50">
</p>
<div id="slider-vertical" style="height: 10px;"></div>