javascript - Setinterval 以指数时间减少

Question

我有一个带有 setinterval 的 mousedown 事件。我希望间隔的时间是可变的。所以第一个是 500，第二个是 500/2 = 250，等等。有什么提示吗？

$plus.mousedown(function(e) {
    increment(20)
    timeout = setInterval(function(){
        increment(20)
    }, 500);
});
$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

干杯!

编辑：很抱歉模棱两可。我希望在鼠标按下期间改变间隔时间。因此，当执行 mousedown 时，intervaltime 应该改变。因此，不是每次单击鼠标，而是每次连续单击，然后再次重置。

Answer 1

setInterval()除非您继续清除延迟更改，否则您无法真正做到这一点，因此您不妨编写一个包装器setTimeout()来完成类似的事情：

function easingTimeout(delay, fn)
{
  var id,
  invoker = function() {
    fn();
    delay = Math.floor(delay / 2);
    if (delay) {
      id = setTimeout(invoker, delay);
    } else {
      id = null;
    }
  }

  // start it off
  id = setTimeout(invoker, delay);

  return {
    clear: function() {
      if (id) {
        clearTimeout(id);
        id = null;
      }
    }
}

要使用：

var timeout;

$plus.mousedown(function(e) {
    increment(20);
    timeout = easingTimeout(500, function() {
        increment(20);
    });
});

$(document).mouseup(function(){
    timeout.clear();
    return false;
});

Answer 2

此解决方案不依赖于 jQuery：

var timeoutInterval = 500;
var mousedown = false;

function incrementAndWait() {
  if (!mousedown) return;
  increment(20);
  timeout = setTimeout(incrementAndWait, timeoutInterval);
  timeoutInterval /= 2;
}

document.onmousedown = function() {
  timeoutInterval = 500; // Reset to 500 to allow multiple mousedown/mouseup
  mousedown = true;
  incrementAndWait();
};

document.onmouseup = function() {
  mousedown = false;
}

您可以添加console.log((new Date).getTime(), 20);到 incrementAndWait 方法以查看控制台上的数字。玩起来很有趣:)