如何让我的滑块在每个指定的像素间隔做一些事情？

Question

我有一个很好的滑块脚本(没有使用库)。我需要一个数学概念，它允许滑块在指定的像素间隔上执行回调。例如，我的滑块是300px宽的，我指定了interval=10，当用户滑动句柄时，回调应该发生在像素位置10,20,30,40等等。如果是interval=3，那么回调应该发生在像素位置3,6,9,12...etc。这是我特别寻找的数学公式。任何帮助都将不胜感激。

拍拍

Answer 1

假设你有变量：

var width = 300;   // px
var interval = 10; // px
var pos; // current position

然后你应该这样做：

if ( pos % interval === 0 ) 
  // do stuff

这称为modulus operator，它返回left_var除以right_var的余数。如果remainder为0，您的检查将返回true，因此您将执行回调(精确到像素10、20、30、40等)。

但请注意，认为你能够处理每一个像素变化的想法是非常天真的……我更愿意做的是检查滑块是否进入了给定的段。

var segment = 1;

然后在滑块的状态改变后，您可以检查位置，如下所示：

if ( Math.floor( pos / interval ) === segment ) {
  // do stuff because the slider
  // has entered a new segment
  // ...
  segment++;
}

如果滑块向后移动，而您希望相应地触发事件，则只需减少段而不是递增即可。