Question

我想知道如何构建一个过滤系统，用户可以使用jQuery滑块来选择值，然后对数据库的Ajax请求将获取一些符合输入参数的新对象。

我如何开发一个功能，在完成拖动滑块之后，一个函数将在1秒延迟后执行，这将产生Ajax请求？

我已经尝试过查看鼠标事件，但只有鼠标才适合 - 但我不知道如何写这个。

这是我在HTML中的滑块...

<div class='drag-slider-wrap max marg'>
     <div class='slider-wrap'>
         <div class='slider-cont' id='slider-cont'>
         </div>
     </div>
</div>
<div class='slider-meta-wrap max marg'>
     <div class='drag-slider-bound-wrap' id='drag-slider'>
         <h3 class='slider-val'>$<span id='slider-val-min'></span> to $<span id='slider-val-max'></span>
         </h3>
     </div>
</div>

并在jQuery ....

$(function() {
    $('#slider-cont').slider({
      range:true,min:0,max:100,step:5,values:[0,100],
      slide:function(event,ui) {
        $('#slider-val-min').html(ui.values[0]);
        $('#slider-val-max').html(ui.values[1]);
      }
    });
    $('#slider-val-min').html($('#slider-cont').slider('values',0));
    $('#slider-val-max').html($('#slider-cont').slider('values',1));
  });

谢谢！

编辑：目前正在使用jQuery用户界面库

Answer 1

据我了解，你不想发出太多的ajax请求，只想在用户完成滑动后发送它。在这种情况下，请使用change event代替slide

$( ".selector" ).slider({
  change: function( event, ui ) {}
});

Answer 2

你想要的是“去抖”这个事件，意思是防止它在很短的时间内被多次射击。

我为此目的编写了一个jquery插件：jquery.ajaxDebounce，您可以在其中配置执行函数之前的最小“静默期”...

该插件用于去除触发ajax调用的事件，但它是开源的，您可以根据需要使用内部逻辑并根据自己的需要使用内部逻辑： - ）

jQuery - 单击完成并发生延迟后，执行一个函数

2 个答案: