web-dev-qa-db-fra.com

Comment appliquer le délai sur AngularJS

J'utilise le code ci-dessous, en lame de laravel

<div ng-show="displayErrorMsg" class="form-group m-b alert alert-danger">{{errorMsg}}

Dans le contrôleur angularjs

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Le message ne disparaît pas automatiquement après 2 secondes.

Mais quand je mets simplement alerte ("test"); ou cliquez n'importe où le message disparaît . Comment résoudre ce problème?

javascriptangularjs
26
Rita

Il suffit d’injecter $timeout dans votre contrôleur et de l’utiliser.

$timeout(function() { $scope.displayErrorMsg = false;}, 2000);

Aussi, vous pouvez utiliser $ digest ou $ apply comme ci-dessous

setTimeout(function() {
    $scope.displayErrorMsg = false;
    $scope.$digest();
}, 2000);

setTimeout(function () {
  $scope.$apply(function(){
      $scope.displayErrorMsg = false;
  });
}, 2000);

Vérifiez ici comment cela fonctionne,

http://www.sitepoint.com/understanding-angulars-apply-digest/

38
ctrl f5

J'ai généralement besoin d'une fonction pour attendre un peu pour une raison quelconque, à des fins de test uniquement. En Java, nous pouvons utiliser le Thread.sleep (). Cependant, en JavaScript, je préfère utiliser une fonction simple que j'ai trouvée ici :

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Cela a fonctionné pour moi dans plusieurs scénarios, y compris AngularJS. Mais, s'il vous plaît, souvenez-vous que cette fonction ne devrait pas être utilisée dans des environnements de production, sauf si vous savez exactement ce que vous faites}.

5
Almir Campos

Exemple 1: setTimeout

var timerCount = function() {
    setTimeout(function () {
        $scope.displayErrorMsg = false;
        $scope.$apply(timerCount);
    }, 2000);
}

Exemple 2: $ timeout

$timeout(function() { 
    $scope.displayErrorMsg = false;
}, 2000);
4
Banik

vous pouvez injecter $ timeout. Méthode window.setTimeout de warapper d'Angular.

essaye celui-là :-

$timeout(function() { $scope.displayErrorMsg = false;}, 2000);

la structure de $ timeout est synatx: - $ timeout (fn, delay, invokeAny, pass)

fonction fn que vous souhaitez retarder

délai: - durée

invokeAny: - la valeur par défaut sera false sinon la fonction fn sera appelée dans le bloc $ apply

pass: - c'est un paramètre optionnel pour exécuter la fonction.

Une autre approche: - 

setTimeout(function () {
  $scope.$apply(function(){
      $scope.displayErrorMsg = false;
  });
}, 2000);

la méthode setTimeout étant hors contexte angulaire, nous devons appeler $ apply qui appellera $ digest cycle car, si nous mettons à jour $ scope dans setTimeout, le besoin angulaire de savoir que $ scope est sale. 

2
Pawan Kashyap

essayez d'utiliser le timeout angulaire, pour plus de https://docs.angularjs.org/api/ng/service/$timeout

ou Comment changer la valeur après délai en utilisant angularjs?

$timeout(function() { $scope.displayErrorMsg = false;}, 2000);
2
Imtiaz Pabel

Solution améliorée 1:

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
if (timer) $timeout.cancel(timer); // restart counter
timer = setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Solution 1:

Vous pouvez utiliser $ timeout :

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Solution 2:

Avec setTimeout:

setTimeout(function () {
    $scope.$apply(function(){
        $scope.displayErrorMsg = false;
    });
}, 2000);
2
A-312

setTimeout est une méthode d'objet window. Donc, pour accéder à cette fonction, injectez $ window dans le contrôleur .Vous pouvez ensuite appeler n'importe quelle méthode, telle que alert, confirm, setTimeout, setInterval, etc. 
Détails https://docs.angularjs.org/api/ng/service/$window
Ensuite, vous pouvez écrire 

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
$window.setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);
1
Jagajit Prusty

Solution synchrone:  

const sleep = ( ms ) => {
    const end = +(new Date()) + ms;
    while( +(new Date()) < end ){ } 
}

Exemple: 

(function() {
    console.log(+(new Date())); // 1527837689811
    sleep(1000);

    console.log(+(new Date())); // 1527837690813
    sleep(2000);

    console.log(+(new Date())); // 1527837692814
    sleep(3000);

    console.log(+(new Date())); // 1527837695814
    sleep(4000);

    console.log(+(new Date())); // 1527837699814
    sleep(5000);
})();
0
Юрий Волос