javascript - 基础 slider : how to figure out if just the value changed?

Question

我正在使用 Foundation Range Slider并希望监听 change-event，但仅当 value 发生变化 时。

不幸的是，在 init 上检测到两个变化，每次窗口也发生变化。

示例(Fiddle):

<div class="range-slider" data-slider data-options="step: 20;">
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

<script>   
$(document).foundation({
  slider: {
      on_change: function(){
          console.log("changed");
          $("body").append("changed<br/>");
     }
   }
});
</script>

我找不到像 onValueChanged 这样的事件。任何想法如何尽可能干净地解决这个问题？我想避免变通办法。

Answer 1

Rory McCrossan 可能是对的，这是一个错误，但有一个简单的解决方法。只需在比回调更广泛的范围内保留一个像 sliderVal 这样的变量，并使用它来跟踪 slider 的最新值。当 on_change 事件触发时，检查 slider 值 - $('div.range-slider').attr('data-slider') - 是否与以前保存的值。如果没有，什么也不做；但如果值不同，则执行您想要的任何操作并确保将 sliderVal 更新为新值。

这是一个jsFiddle实现了这个概念。您会看到它没有任何重复事件或浏览器窗口更改时触发的事件的问题。

此外，如果您担心将 sliderVal 置于全局范围之外，您可以将其隐藏在闭包中。这是我避免全局变量的首选方法；我制作了另一个 jsFiddle 来演示它 here.此版本也不会在窗口首次加载时触发事件，因此我认为它解决了您的所有顾虑。