下面是我的代码最简单的形式，我正在遍历一个数组并在每次迭代中删除一个随机项，直到循环长度为 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);
}
【问题讨论】：
标签： javascript angularjs timeout
您可以为此目的使用setInterval
setInterval() 方法调用函数或计算表达式 以指定的时间间隔（以毫秒为单位）。
setInterval() 方法将继续调用该函数，直到 调用 clearInterval() 或关闭窗口。
setInterval()返回的ID值作为参数 clearInterval() 方法。
提示：1000 毫秒 = 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
【讨论】：
你可以使用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;
}【讨论】：
您在问题中提到的 SO 答案也很有效。请参阅 sn-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>【讨论】：
EDIT -> 在有用的评论之后，我意识到 $timeout 不是最好的答案。所以我同意这里关于使用间隔的其他答案，但我仍然建议使用 Angular 的内置 $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 还会返回一个承诺，该承诺会在最后一次迭代完成时被解析，因此您想要在间隔完成后执行的任何异步工作都可以轻松处理。
上一个答案：
Angular 提供$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 毫秒。
【讨论】：
使用setInterval 函数。
这将在一段时间后继续调用该函数。
示例：
var myFunction = function () {
//do something
};
setInterval(myFunction, 1000)
在本例中，它将每 1000 微秒调用一次myFunction。
关键：
1000 毫秒 = 1 秒
您也可以使用脚本取消setInterval：
//create an variable for the setInterval
var intervalId = setInterval(myFunction, 2500);
//That is 2.5 seconds
//Now to cancel the interval:
clearInterval(intervalId);
使用clearInterval(); 停止间隔。
在() 中输入要停止的区间名称。
调用多个函数或做某事：
要一次调用多个函数或执行其他操作，请使用以下命令：
var intervalId = setInterval(function () {
//put whatever you want here, I'll put some examples
callAFunction();
inputFunction("123Example...");
alert("Hello!");
//Not a function, just as I said, you can do whatever you want here
console.log("setInterval Is great"); //Not a function!!!!!!!!!!!!!
//This is a comment
/*
This is
another
*/
functionCall();
//here is the end of this variable
}, 100); //the number is the amount of ms after it loops again
你看到了吗？这非常有用！
告诉我如果我说了你不想做的话。
^_^
【讨论】：