Angular에 지연을 적용하는 방법JS

Angular에 지연을 적용하는 방법JS

라라벨 블레이드에 아래 코드를 사용하고 있습니다.

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

angularjs 컨트롤러 내

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

주어진 대로 2초가 지나도 메시지가 자동으로 사라지지 않습니다.

그러나 단순히 경보("test")를 넣거나 아무 곳이나 클릭하면 메시지가 사라집니다.이 문제를 해결하는 방법

그냥 주입해$timeout컨트롤러에서 이 명령을 사용합니다.

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

또한 아래와 같이 $digest 또는 $apply를 사용할 수 있습니다.

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

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

이게 어떻게 작동하는지 확인해봐

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

어떤 이유로든 조금 기다릴 수 있는 기능이 필요하지만 테스트 목적으로만 필요합니다.자바에서는 스레드를 사용할 수 있습니다.sleep sleep sleep sleep sleep sleep.단, JavaScript에서는 다음과 같은 간단한 함수를 사용하는 것이 좋습니다.

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

AngularJS를 포함한 여러 시나리오에서 효과가 있었습니다.하지만 정확히 무엇을 하고 있는지 모르는 한 실제 환경에서 이 기능을 사용하면 안 됩니다.

예 1: set Timeout

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

예 2: $timeout

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

$140을 투입할 수 있습니다.Angular의 warapper window.setTimeout 메서드.

이것을 시험해 보세요:-

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

$timeout 구조는 synatx:- $timeout(fn, delay, invoke Any, pass)입니다.

fn- 지연시키고 싶은 함수

지연: - 지속시간

invoke Any: 디폴트로 false가 설정되어 있지 않으면 $apply 블록 내의 함수 fn이 호출됩니다.

pass : 함수를 실행하기 위한 옵션 파라미터입니다.

또 다른 접근법:-

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

setTimeout 메서드는 Angular Context를 다 사용하므로 $apply를 호출하여 $digest cycle을 호출해야 합니다.setTimeout Angular는 $scope가 더러워지는 것을 알아야 하기 때문입니다.

https://docs.angularjs.org/api/ng/service/$timeout에 대한 자세한 내용은 각도 타임아웃을 사용해 보십시오.

또는 angularjs를 사용하여 지연 후 값을 변경하는 방법은 무엇입니까?

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

개선된 솔루션 1:

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

솔루션 1:

$timeout을 사용할 수 있습니다.

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

솔루션 2:

set Timeout 사용 시:

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

set Timeout은 창 객체의 메서드입니다.이 기능에 액세스하려면 컨트롤러에 $window를 삽입합니다.그런 다음 alert, confirm, setTimeout, setInterval 등의 메서드를 호출할 수 있습니다.
상세 https://docs.angularjs.org/api/ng/service/$window
그럼 글을 쓰세요.

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

동기 솔루션:

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

예:

(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);
})();

언급URL : https://stackoverflow.com/questions/35548207/how-to-apply-delay-on-angularjs