refactor: requestAnimationFrame

Migrating from setInterval to requestAnimationFrame for a more optimize animation

Author: NormanV41

projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts

@@ -80,9 +80,10 @@ export class PageScrollInstance {
   /* Whether an interrupt listener is attached to the body or not */
   public interruptListenersAttached = false;
 
-  /* References to the timer instance that is used to perform the scroll animation to be
+  /* Value of the requestAnimationFrameId that is used to perform the scroll animation to be
    able to clear it on animation end*/
-  public timer: any = null;
+
+  public requestFrameId: number | null = null;
 
   /**
    * Private constructor, requires the properties assumed to be the bare minimum.

projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts

@@ -54,11 +54,11 @@ export class PageScrollService {
       pageScrollInstance.detachInterruptListeners();
     }
 
-    if (pageScrollInstance.timer) {
+    if (pageScrollInstance.requestFrameId) {
       // Clear/Stop the timer
-      clearInterval(pageScrollInstance.timer);
+      window.cancelAnimationFrame(pageScrollInstance.requestFrameId)
       // Clear the reference to this timer
-      pageScrollInstance.timer = undefined;
+      pageScrollInstance.requestFrameId = null;
       pageScrollInstance.fireEvent(!interrupted);
 
       return true;
@@ -198,7 +198,14 @@ export class PageScrollService {
     // .. and calculate the end time (when we need to finish at last)
     pageScrollInstance.endTime = pageScrollInstance.startTime + pageScrollInstance.executionDuration;
 
-    pageScrollInstance.timer = setInterval((instance: PageScrollInstance) => {
+    pageScrollInstance.requestFrameId =  window.requestAnimationFrame(this.updateScrollPostion(pageScrollInstance))
+
+    // Register the instance as running one
+    this.runningInstances.push(pageScrollInstance);
+  }
+
+  public updateScrollPostion(instance: PageScrollInstance){
+    return  ()=>{
       // Take the current time
       const currentTime: number = new Date().getTime();
 
@@ -231,12 +238,10 @@ export class PageScrollService {
       // (otherwise the event might arrive at "too early")
       if (stopNow) {
         this.stopInternal(false, instance);
+      } else{
+        window.requestAnimationFrame(this.updateScrollPostion(instance))
       }
-
-    }, this.config._interval, pageScrollInstance);
-
-    // Register the instance as running one
-    this.runningInstances.push(pageScrollInstance);
+    }
   }
 
   public scroll(options: PageScrollOptions): void {