js角度按钮保持循环失败

js angular button hold loop failing

本文关键字：循环 失败 按钮 js      更新时间：2024-05-02

我需要一个可以按下一次来执行单个命令的按钮。但也可以按住按钮并在按住按钮的同时多次执行命令。我正在使用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)。从那以后，我收到了"超过最大调用堆栈大小"的错误。

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

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

这可能不是你问题的确切解决方案，但也许它会给你一些启发和帮助：）祝你好运。

/**
  *
  * @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);
     });
 };

这是造成伤害的参数：

更改时

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

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

我应该做：

promis = setTimeout(function(){ loop('Up') },1000);
相关文章：