在循環中超時或睡眠

以最簡單的形式，我的代碼如下，我循環一個數組，並在每次迭代中刪除一個隨機項，直到循環長度爲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

在循環中超時或睡眠

回答

相關問題