在循环中超时或睡眠

以最简单的形式，我的代码如下，我循环一个数组，并在每次迭代中删除一个随机项，直到循环长度为0.我想添加睡眠或延迟每次迭代，但我不确定在angular1.x或普通的js中实现此目的的最佳方法。在循环中超时或睡眠

我发现了这个问题What is the JavaScript version of sleep()?但是无法得到评分最高的答案。

任何人都可以请这方面的帮助：

while($scope.players.length > 0){ 

    random = Math.floor(Math.random() * $scope.players.length); 
    $scope.players.splice(random, 1); 

}

来源

2017-05-30 mark

您可以使用setInterval用于这一目的

的setInterval（）方法调用函数或指定的时间间隔计算表达式（以毫秒为单位）。

setInterval（）方法将继续调用该函数，直到调用clearInterval（），或者窗口关闭。

setInterval（）返回的ID值用作 clearInterval（）方法的参数。

提示：1000 ms = 1秒。提示：要在指定数量的毫秒之后执行一次函数，请使用setTimeout（）方法。

例

function _do(){ 
    if($scope.players.length > 0){ 

    random = Math.floor(Math.random() * $scope.players.length); 
    $scope.players.splice(random, 1); 

    } else clearInterval(_loop); 
} 

var _loop = setInterval(_do,1000); //Sleep for 1 sec

来源

2017-05-30 08:35:34

你可以使用setInterval？

var array = [1, 2, 3, 4, 5, 6, 7] 
 
var interval = null; 
 

 

 
function removeArray() { 
 
    random = Math.floor(Math.random() * array.length); 
 
    array.splice(random, 1); 
 
    console.log(array); 
 

 
    if (array.length == 0) { 
 
    clearInterval(interval); 
 
    } 
 
} 
 

 
interval = setInterval(removeArray, 1000);

.as-console-wrapper { 
 
    max-height: 100% !important; 
 
    top: 0; 
 
}

来源

2017-05-30 08:36:02 George

编辑 - >有用的评论之后，我意识到$超时是不是最好的答案。所以我会用其他的答案在这里同意有关使用的间隔，但我还是建议采用了棱角分明的内置$interval服务：

(function() { 
 
    'use strict'; 
 

 
    angular.module('MyApp', []); 
 

 
    angular 
 
    .module('MyApp') 
 
    .controller('MyCtrl', MyCtrl); 
 

 
    MyCtrl.$inject = ['$scope', '$interval']; 
 

 
    function MyCtrl($scope, $interval) { 
 

 
    $scope.players = ['a', 'b', 'c', 'd', 'e']; 
 
    var INTERVAL_LENGTH = 1000; // This can be however long you want 
 
    var INTERVAL_COUNT = $scope.players.length; 
 

 
    if (INTERVAL_COUNT > 0) { 
 
     $interval(function() { 
 
     var random = Math.floor(Math.random() * $scope.players.length); 
 
     $scope.players.splice(random, 1); 
 
     }, INTERVAL_LENGTH, INTERVAL_COUNT).then(function() { 
 
     $scope.players = 'done!'; 
 
     }); 
 
    } 
 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MyCtrl"> 
 
    <span>{{ players }}</span> 
 
</div>

$interval也返回其解决的承诺时，最后一次迭代完成，因此可以轻松处理任何间隔完成后要执行的异步工作。

以前的答案：

角提供$timeout服务。将其作为依赖项注入控制器之后：

var PAUSE_AMOUNT = 500; // This can be however long you want 
while($scope.players.length > 0){ 
    $timeout(function() { 
     random = Math.floor(Math.random() * $scope.players.length); 
     $scope.players.splice(random, 1); 
    }, PAUSE_AMOUNT); 
}

这将在while循环的每次迭代之间暂停500 ms。

来源

2017-05-30 08:38:30

有在你的答案没有while循环，并没有退出策略要么 –

我指的是在原来的问题while循环，我会在代码中添加它为清楚起见 –

我只是不认为它会暂停执行while循环：p –

你在问题中提到的答案也适用。查看片段。

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 
 

 
    $scope.players = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd', 'a', 'b', 'c', 'd']; 
 
    var ele = angular.element(document.querySelector('#playersEle')); 
 
    ele.html($scope.players); 
 
    function sleep(ms) { 
 
    return new Promise(resolve => setTimeout(resolve, ms)); 
 
    } 
 

 
    async function demo() { 
 
    while ($scope.players.length > 0) { 
 
     console.log('Taking a break...'); 
 
     await sleep(2000); 
 
     console.log('Two second later'); 
 
     random = Math.floor(Math.random() * $scope.players.length); 
 
     $scope.players.splice(random, 1); 
 
     ele.html($scope.players); 
 
    } 
 
    } 
 
    demo(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="MyApp" ng-controller="MyCtrl"> 
 
    <span id="playersEle"></span> 
 
</body>

来源

2017-05-30 08:47:39 Sajal

在循环中超时或睡眠

回答

相关问题