js角度按钮保持循环失败

Question

我需要一个可以按下一次的按钮来执行单个命令。但是也应该可以按住按钮并在按住按钮的同时多次执行命令。我正在使用AngularJs（虽然我不认为它与问题有关）

到目前为止我所拥有的：

<button type="button" 
        class="btn btn-default" 
        ng-click="ChangeSetPoint('Up')"
        ng-mousedown="startLoopingUp()"
        ng-mouseup="stopLoopingUp()"
        ng-mouseleave="stopLoopingUp()">
        +
</button>

在控制器中：

$scope.ChangeSetPoint = function(direction){
            //Stuff to actually change the setpoint
        }

        var looping = false;
        var promis;
        $scope.startLoopingUp = function(){
            looping = true;
            promis = setTimeout(loop('Up'),1000);           
        }

        var loop = function(direction){                                         
            $scope.ChangeSetPoint(direction);
            if(looping){
                promis = setTimeout(loop(direction),300)
            }
        }

        $scope.stopLoopingUp = function(){
           looping = false;
           clearTimeout(promis);
        }

在我使用这个“方向”参数之前，它有点工作。在我在 setTimeout 中使用 arguments.callee 之前，但是当我查看如何使用该函数传递参数时，我注意到不鼓励使用 arguments.callee (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee)。从那时起，我收到“超出最大调用堆栈大小”错误。

Answer 1

前段时间我在指令中使用了以下函数。我创建它时考虑到以下几点：

该函数可能包含三个单独的回调函数。单击即可调用“短”回调。按住按钮时，会重复调用短回调。当仍然按住按钮时，“长”回调会重复触发。最后，当用户停止按下时，将触发第三个“最终”回调。

它可能无法准确解决您的问题，但也许会启发并帮助您一点：）祝您好运。

/**
  *
  * @param {Event} evt
  * @param {Function} shortCallback
  * @param {Function} longCallback
  * @param {Function} [finishCallback] optional
  */
var onBtnClick = function (evt, shortCallback, longCallback, finishCallback) {
    //prevent mobile browser from long tap behaviour (simulated right click)
    evt.preventDefault();
    //only react to left mouse button or a touch event
    if (evt.which === 1 || evt.type === "touchstart") {
        //save 'this' context and interval/timeout IDs
        var self = this,
            short = {
                timeout     : null,
                interval    : null,
                callback    : angular.isFunction(shortCallback) ? shortCallback : angular.noop
            },
            long = {
                timeout     : null,
                interval    : null,
                callback    : angular.isFunction(longCallback) ? longCallback : short.callback
            },
            listener = "mouseup mouseleave touchend touchcancel",
            //
            cancelShort = function () {
                $timeout.cancel(short.timeout);
                $interval.cancel(short.interval);
            },
            //
            cancelLong = function () {
                $timeout.cancel(long.timeout);
                $interval.cancel(long.interval);
            };

        //react to a single click
        short.callback();

        //when user leaves the button cancel timeout/interval, lose focus and unbind recently bound listeners
        self.one(listener, function (e) {
            e.preventDefault();
            cancelShort();
            cancelLong();

            if (angular.isFunction(finishCallback)) {
                finishCallback();
            }

            self.blur();
        });

        //on a long click call the callback function within an interval for faster value changing
        short.timeout = $timeout(function () {
            short.interval = $interval(short.callback, 50, 0, false);
        }, 300, false);

        //when pressed even longer, cancel previous callback and fire "long" one
        long.timeout = $timeout(function () {
            cancelShort();
            long.interval = $interval(long.callback, 50, 0, false);
        }, 1500, false);
    }
};

此函数已绑定到具有以下内容的元素：

/**
 *
 * @param {String} selector
 * @param {Function} clickCallback
 * @param {Function} fastCallback
 * @param {Function} [finishCallback] optional
 */
 var bindEvent = function (selector, clickCallback, fastCallback, finishCallback) {
     $element.on("mousedown touchstart", selector, function (evt) {
         onBtnClick.call($(this), evt, clickCallback, fastCallback, finishCallback);
     });
 };

Answer 2

这是造成伤害的参数：

改变时

setTimeout(loop, 1000) 到 setTimeout(loop('Up'), 1000)

我没有将函数作为参数，而是执行函数并将返回作为参数。

我应该做的：

promis = setTimeout(function(){ loop('Up') },1000);