Added interval for compiling component preview on changes.

This fixes the issue where components like match that have many parts slowed down noticeably when a lot of text were inputted.
Before, the preview was updating with each change. The interval acts like a debounce. #2949

Author: hirokiterashima

src/main/webapp/wise5/authoringTool/components/preview-component/previewComponent.ts

@@ -4,7 +4,9 @@ import { ProjectService } from '../../../services/projectService';
 class PreviewComponentController {
   componentContent: any;
   componentId: string;
+  isDirty: boolean;
   nodeId: string;
+  updateInterval: any;
 
   static $inject = ['$scope', '$compile', '$element', 'NodeService', 'ProjectService'];
 
@@ -23,19 +25,30 @@ class PreviewComponentController {
     );
     this.$scope.nodeId = this.nodeId;
     this.$scope.type = this.componentContent.type;
+    this.compileComponent();
     this.$scope.$watch(
       () => {
         return this.componentContent;
       },
       () => {
-        this.$scope.componentContent = this.ProjectService.injectAssetPaths(this.componentContent);
-        this.compileComponent();
+        this.isDirty = true;
       },
       true
     );
+    this.updateInterval = setInterval(() => {
+      if (this.isDirty) {
+        this.compileComponent();
+        this.isDirty = false;
+      }
+    }, 3000);
+  }
+
+  $onDestroy() {
+    clearInterval(this.updateInterval);
   }
 
   compileComponent() {
+    this.$scope.componentContent = this.ProjectService.injectAssetPaths(this.componentContent);
     const componentHTML = `<div class="component__wrapper">
           <div ng-include="::componentTemplatePath" class="component__content component__content--{{::type}}"></div>
         </div>`;