仅当释放光标/手指时，如何使 jquery .range() 滑块触发？答案

【问题标题】：How to make jquery .range() slider fire only when the cursor / finger is released?仅当释放光标/手指时，如何使 jquery .range() 滑块触发？
【发布时间】：2022-08-14 20:17:37
【问题描述】：

我正在使用 jquery 滑块来选择年龄范围。它具有两端的最小值和最大值。当滑块从左右任意一侧拖动时，它会连续触发 N 次 AJAX 调用（如浏览器的 Inspect Element 的 Network 选项卡中所示），直到被拖动并仅在释放滑块时停止。继续拖动，它会不停地触发 AJAX 调用。这使得代码为单个选择更新后端数据库 N 次。但是，我的要求与它目前的运作方式完全相反。 AJAX 调用应该只触发一次，并且当光标从拖动器中释放时也应该触发一次。如何做到这一点？ Jquery 似乎没有为此提供默认选项（如果我错了，请纠正我）。

HTML

<div class=\"maxage\">
  <form field=\"age_range\">
    <div id=\"maxAge\" min=\"18\" max=\"75\" minVal=\"<?php echo $ageRange[0]; ?>\" maxVal=\"<?php echo $ageRange[1]; ?>\"></div>
    <input type=\"text\" class=\"slider-text text-end gradient-text mt-2\" id=\"sliderVal\" readonly>
  </form>
</div>

jQuery

$(\"#maxAge\").slider({
  range: true,
  min: parseInt($(\"#maxAge\").attr(\'min\')),
  max: parseInt($(\"#maxAge\").attr(\'max\')),
  values: [
    parseInt($(\"#maxAge\").attr(\'minVal\')), 
    parseInt($(\"#maxAge\").attr(\'maxVal\'))
  ],
  slide: function(event, ui) {
    $.ajax({
      type: \'POST\',
      url: \'processes/settings.php\',
      data: \'field=age_range&value=\'+ui.values[0]+\'-\'+ui.values[1],
      success: function(data){
        $(\"#sliderVal\").val($(\"#maxAge\").slider(\"values\", 0) + \"-\" + $(\"#maxAge\").slider(\"values\", 1));
      }
    });
  }
});
$(\"#sliderVal\").val($(\"#maxAge\").slider(\"values\", 0) + \"-\" + $(\"#maxAge\").slider(\"values\", 1));

标签： javascript jquery ajax slider jquery-ui-slider

【解决方案1】：

您可以改用 change 事件吗，因为它仅在用户停止滑动后触发一次

$("#maxAge").slider({
  range: true,
  min: parseInt($("#maxAge").attr('min')),
  max: parseInt($("#maxAge").attr('max')),
  values: [
    parseInt($("#maxAge").attr('minVal')), 
    parseInt($("#maxAge").attr('maxVal'))
  ],
  change: function(event, ui) {
   
    $.ajax({
      type: 'POST',
      url: 'processes/settings.php',
      data: 'field=age_range&value='+ui.values[0]+'-'+ui.values[1],
      success: function(data){
      console.log('')
        $("#sliderVal").val($("#maxAge").slider("values", 0) + "-" + $("#maxAge").slider("values", 1));
      }
    });
  }
});

【讨论】：

@downvoter 学习和燃烧！！！
很高兴我能帮上忙，是的，不知道为什么有人投了你的票，如果有任何咨询，我都会因为小事而发生=/大声笑
人们现在无法给出解决方案，因此对这样一个框架良好且解释清楚的问题投了反对票。 SO不再是8-10年前的样子。
我完全 100% 同意你的观点，我相信没有不好的问题或答案，但我们分享知识以更好地理解，所以曾经是一个友好支持的社区，但现在它有据可查，并且知道它往往是一种判断力和精英主义，可惜它失去了这么多的社区精神
切中要害。