我的网站上有一个基础范围滑块。预期的功能是移动滑块时,它会提交Ajax查询并更新搜索结果列表。当滑块改变时,这是我的JQuery:
$('[data-slider]').on('change.fndtn.slider', function(){
$('#location-ajax-filter').trigger('change');
});
这完美无缺。但是,我注意到它发射了数万次。页面大小更改,页面加载,滑块轻微移动等。这是我想要更好地控制的东西。在我看来,基础范围滑块缺少一个基本的东西 - 像JQueryUI滑块这样的停止事件。我不想要JQueryUI的开销,所以我不想使用它。
由于我已经将_underscore.js作为构建的一部分,因此我想为什么不使用_.debounce来控制触发。我需要帮助的是如何重写上面的代码。
我试过这个,但它似乎不起作用 - 我想我在错误的地方调用去抖功能?
$('[data-slider]').on('change.fndtn.slider', function(){
_.debounce($('#location-ajax-filter').trigger('change'), 3000);
});
另外,有没有办法可以扩展它以解决页面大小的变化并防止它在页面加载时触发?
非常感谢任何帮助!
更新
我想我可能已经解决了如何使用去抖功能,但是,我仍然没有解决如何防止数据滑块在页面加载和页面调整大小时触发。这就是我部分解决问题的方法:
$('[data-slider]').on('change.fndtn.slider', _.debounce(function(){
$('#location-ajax-filter').trigger('change');
}, 1000));
如果有人知道页面加载和大小的答案,仍然需要帮助。