AngularJS $间隔应动态输入/下降 [英] AngularJS $interval should dynamically in-/ decrease

问题描述

我只是想用$间隔（anyFunction（）{}，1000）;
但1000值应该是可变的，太。
如果我通过定义一个变量改变它，间隔不会改变的观点。

i just want to use $interval(anyFunction(){}, 1000); But value of 1000 should be variable, too. If i change it by defining a variable, the interval won't change on the view.

有人能发布一个例子，如何更新的$区间的速度？

Could someone post an example how to update the 'speed' of an $interval?

非常感谢你。

以防万一：

我的控制器：

$scope.food = 0;

var stop;
var farmInterval = 1000;

$scope.startFarming = function () {
    console.log('farming started...');
    if (angular.isDefined(stop)) return;

    stop = $interval(function () {
        $scope.food += 1;
    }, farmInterval); // <-- this value 'farmInterval' should be variable
}

$scope.stopFarming = function () {
    if (angular.isDefined(stop)) {
        $interval.cancel(stop);
        stop = undefined;
    }
}

$scope.increaseFarmInterval = function () {
    console.log(farmInterval);
    if (farmInterval > 100) {
        console.log('Increased by 50');
        farmInterval -= 50;
    } else {
        console.log('maximum reached.');
    }
}

我的观点：

<pre>{{food}}</pre>
<button class="btn btn-default" data-ng-click="startFarming()">Farm</button>
<button class="btn btn-default" data-ng-click="increaseFarmInterval()">Increase Farm Interval</button>
<button class="btn btn-danger" data-ng-click="stopFarming()">Stop</button>

Plunker-版本： http://plnkr.co/edit/V904pebWGvTWpyGMItwo?p = preVIEW

推荐答案

您需要使用$超时：

$scope.food = 0;
var farmInterval = 1000;
var shouldStop = true;

$scope.startFarming = function () {
    console.log('farming started...');
    shouldStop = false;
    var loop = function () {
        if (!shouldStop) {
            $scope.food += 1;
            $timeout(loop, farmInterval);
            //defers another call to this function in a timeout
            //on each "iteration" like this -actually it's not
            //an interation- you can control what interval time to assign
        }
    };
}

$scope.stopFarming = function () {
    shouldStop = true;
}

$scope.increaseFarmInterval = function () {
    console.log(farmInterval);
    if (farmInterval > 100) {
        console.log('Increased by 50');
        farmInterval -= 50;
    } else {
        console.log('maximum reached.');
    }
}

注意我是如何转换的$计时器在$超时调用链。这不仅是很好的做法，改变间隔，也就是一个脚本可以实现的唯一途径的setInterval 时，浏览器只实施的setTimeout 那些日子。

Notice how I converted the $timer in a chain of $timeout calls. This is not only good practice to alter the interval, but also was the only way a script could implement setInterval when a browser implemented only setTimeout those days.

大部分code已经是你的，但我修改了 $计时器 - 相关逻辑和不使用 $计时器了，所以你必须注入 $超时，而不是（或还 - 这取决于如果你使用 $计时器其他地方在控制器，或没有）。

Most of the code is already yours, but I modified the $timer-related logic and don't use $timer anymore, so you must inject $timeout instead (or also - it depends if you're using $timer somewhere else in the controller, or not).

所以逻辑改为：你不杀定时器。相反，你prevent一个新的 $超时重复发生，因为 - 如果你看看closely-每次迭代循环的中央逻辑后，明确创建的。

So the logic was changed: you don't kill a timer. Instead you prevent a new $timeout iteration occurs, since -if you look closely- each iteration is created explicitly after the loop's central logic.

这篇关于AngularJS $间隔应动态输入/下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！