将值增加 1 直到使用角度鼠标事件释放鼠标答案

【问题标题】：Increase value by 1 till mouse is release using angular mouse events将值增加 1 直到使用角度鼠标事件释放鼠标
【发布时间】：2013-12-13 05:56:53
【问题描述】：

我有一个显示一些数值的 td 跨度，并且在跨度上方和下方显示了 2 个图标（向上/向下箭头）。单击向上箭头将值增加 1 到 99，单击向下箭头将值减小 1 到 0。使用 ng-click 一切正常。

问题是如果我想将值从 10 增加到 20，我必须单击向上箭头 10 次。我想通过在向上箭头上按住鼠标来做到这一点。它应该一直增加/减少，直到我分别在向上/向下箭头上释放鼠标。

我尝试使用 ng-mousedown 但它增加了 1。有没有一种方法可以调用 js 函数直到释放鼠标按钮。

任何指针都会有所帮助。

到目前为止我尝试过的代码：

var mouseDown = true;

变量间隔;

$scope.keepPressing = function(){

    mouseDown = true;
    if (mouseDown){
        doSome();
    }

};
function doSome(){
    console.log(mouseDown);
    if (mouseDown){
        console.log(1);
        interval = setInterval(doSome, 1000);
    }
}

$scope.isMouseDown = function (){

    clearInterval(interval);
    mouseDown = false;
};

HTML:

这个问题是即使当我释放鼠标时没有打印值 1，值 false（mousedown 值）被无限记录。这只是一个测试流程，用于在我将其应用于我的实际功能之前检查它是否适合我。

控制台的输出：真的 1 真的 1 真的 1 真的 1 真的 1 真的 1 真的 1 真的 1 63 错误

释放鼠标后，几秒钟内会打印 63 次 false 值。我必须刷新页面才能停止它。

【问题讨论】：

想想你想看看使用 $timeout 每隔一段时间调用一些函数然后有一个布尔标志，你可以在其中跟踪鼠标是否按下（或者更好的是启动和停止$timeout 函数调用基于鼠标向下/向上事件）

标签： javascript angularjs

【解决方案1】：

这里是指令，可以设置你自己的时间间隔和步骤：

.directive('changingValue', function(){

return {

  scope : {
    changingValue :"=",
    changingValueStep : "@",
    changingValueInterval : "@"
  },
  link : function(scope, element, attrs) {

    var step = attrs.changingValueStep;
    if(!step)step = 1;
    else step = parseInt(step);

    var interval = attrs.changingValueInterval;
    if(!interval)interval = 500;
    else interval = parseInt(interval);

    console.log("step", step, "interval", interval);

    var pressed = false;

    function changeValue() {
       if (pressed) {
          setTimeout(
            function() {
              console.log(scope.changingValue);
              scope.changingValue += step;
               scope.$apply();
              changeValue();
            }, interval
          )
       }

    }

    element.on("mousedown", function() {
      pressed = true;
      changeValue();
    });

    element.on("mouseup", function() {
       pressed = false;
    });


  }

}

基本上可以这样使用：

<div changing-value="counter" changing-value-step="-1" changing-value-interval="200">-</div>

这里正在工作--->PLNKR<---。

【讨论】：

指令有效。但是我想通过 js 函数来完成，因为我的递增和递减逻辑非常复杂。按照 hussain 的建议，它可以与带有 mousedown/mouseup 事件的 $timeout 一起使用。

【解决方案2】：

这是我为我所做的工作。

var interval;
scope.mousePress = function(){
    doSome();
    }
};
var doSome = function {
    increaseValue(); // separate function where all the increment logic resides.
    interval = $timeout(doSome, 1000);
}

scope.mouseRelease = function (){
    $timeout.cancel(interval);  
};

在 HTML 中，分别从 ng-mousedown 和 ng-mouseup 调用 mousePress 和 mouseRelease 函数。

【讨论】：