มีข้อได้เปรียบอะไรในการใช้ $timeout ใน AngularJS แทน window.setTimeout

ในคำพื้นฐาน $timeout หมายถึง เชิงมุมเมื่อ setTimeout - ถึง JavaScript

หากคุณยังคงคิดจะใช้ setTimeout ดังนั้นคุณต้องเรียกใช้ $scope.$apply() หลังจากนั้น

เป็นบันทึกด้านข้าง

ฉันขอแนะนำให้คุณอ่าน ฉันจะ “คิดใน AngularJS” ได้อย่างไรหากฉันมีพื้นหลัง jQuery โพสต์

และ AngularJS: ใช้ $timeout ไม่ใช่ setTimeout

ตัวอย่างที่ 1: $หมดเวลา

   $scope.timeInMs = 0;
  
    var countUp = function() {
        $scope.timeInMs+= 500;
        $timeout(countUp, 500);
    }    
    $timeout(countUp, 500); 

ตัวอย่างที่ 2: setTimeout (ตรรกะเดียวกัน)

 $scope.timeInMs_old = 0;
  
    var countUp_old = function() {
        $scope.timeInMs_old+= 500;        
        setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);
    }
        
    setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);

การสาธิต ซอ

$timeout ยังส่งคืนสัญญาด้วย

JS

function promiseCtrl($scope, $timeout) { 
 $scope.result = $timeout(function({ 
 return "Ready!"; 
 }, 1000); 
}

HTML

<div ng-controller="promiseCtrl"> 
 {{result || "Preparing…"}}
</div> 

$timeout ยังทำให้เกิดวงจรการแยกย่อยด้วย

พิจารณาว่าเรามีโค้ดของบุคคลที่สาม (ไม่ใช่ AngularJS) เช่นปลั๊กอิน Cloudinary ที่อัปโหลดไฟล์บางไฟล์และส่งคืนการโทรกลับด้วยอัตราเปอร์เซ็นต์ 'ความคืบหน้า' ให้เรา

     // .....
     .on("cloudinaryprogress",
           function (e, data) {
               var name = data.files[0].name;
               var file_ = $scope.file || {};
               file_.progress = Math.round((data.loaded * 100.0) / data.total);
                               
                                
                $timeout(function(){
                     $scope.file = file_;
                }, 0);         
            })

เราต้องการอัปเดต UI ของเรา aka $scope.file = file_;

ว่างเปล่า $timeout ทำงานให้เรา มันจะทริกเกอร์วงจรการแยกย่อย และ $scope.file อัปเดตโดยบุคคลที่สามจะแสดงผลอีกครั้งใน GUI

1. มันจะล้อมการโทรกลับให้คุณโดยอัตโนมัติในบล็อก try/catch และให้คุณจัดการกับข้อผิดพลาดในบริการ $ExceptionHandler: http://docs.angularjs.org/api/ng.$ExceptionHandler
2. มันส่งคืนสัญญาและมีแนวโน้มที่จะทำงานร่วมกับโค้ดตามสัญญาอื่น ๆ ได้ดีกว่าวิธีการโทรกลับแบบเดิม เมื่อการโทรกลับของคุณกลับมา ค่าที่ส่งคืนจะถูกใช้เพื่อแก้ไขสัญญา

AngularJS ปรับเปลี่ยนโฟลว์ JavaScript ปกติโดยจัดเตรียมลูปการประมวลผลเหตุการณ์ของตัวเอง สิ่งนี้จะแยก JavaScript ออกเป็นบริบทการดำเนินการแบบคลาสสิกและ AngularJS เฉพาะการดำเนินการที่ใช้ในบริบทการดำเนินการ AngularJS เท่านั้นที่จะได้รับประโยชน์จากการเชื่อมโยงข้อมูล AngularJS การจัดการข้อยกเว้น การดูคุณสมบัติ ฯลฯ

ด้วยการใช้บริการ AngularJS $timeout การห่อ setTimeout จะถูกดำเนินการในบริบทการดำเนินการ AngularJS

สำหรับข้อมูลเพิ่มเติม โปรดดู

• การอ้างอิง API บริการ AngularJS $timeout
• คู่มือนักพัฒนา AngularJS - บูรณาการกับลูปเหตุการณ์ของเบราว์เซอร์