AngularJS $interval should dynamically in-/ decrease

问题

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?

Thank you very much.

Just in case:

my controller:

$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.');
    }
}

my view:

<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-Version: http://plnkr.co/edit/V904pebWGvTWpyGMItwo?p=preview

回答1:

You need to use $timeout:

$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.');
    }
}

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.

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).

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.

来源：https://stackoverflow.com/questions/25082248/angularjs-interval-should-dynamically-in-decrease

标签

angularjs

intervals