add response time

markedjs · Feb 13, 2019 · ab42f86 · ab42f86
1 parent acf9c82
commit ab42f86
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/docs/demo/demo.js b/docs/demo/demo.js
@@ -17,6 +17,7 @@ var $markedVer = document.querySelector('#markedCdn');
 var $optionsElem = document.querySelector('#options');
 var $outputTypeElem = document.querySelector('#outputType');
 var $inputTypeElem = document.querySelector('#inputType');
+var $responseTimeElem = document.querySelector('#responseTime');
 var $previewElem = document.querySelector('#preview');
 var $previewIframe = document.querySelector('#preview iframe');
 var $permalinkElem = document.querySelector('#permalink');
@@ -298,6 +299,7 @@ function checkForChanges() {
         setScrollPercent(scrollPercent);
         var endTime = new Date();
         delayTime = endTime - startTime;
+        setResponseTime(delayTime);
         if (delayTime < 50) {
           delayTime = 50;
         } else if (delayTime > 500) {
@@ -309,6 +311,22 @@ function checkForChanges() {
   checkChangeTimeout = window.setTimeout(checkForChanges, delayTime);
 };
 
+function setResponseTime(ms) {
+  var amount = ms;
+  var suffix = 'ms';
+  if (ms > 1000 * 60 * 60) {
+    amount = 'Too Long';
+    suffix = '';
+  } else if (ms > 1000 * 60) {
+    amount = '>' + Math.floor(ms / (1000 * 60));
+    suffix = 'm';
+  } else if (ms > 1000) {
+    amount = '>' + Math.floor(ms / 1000);
+    suffix = 's';
+  }
+  $responseTimeElem.textContent = amount + suffix;
+}
+
 function setParsed(parsed, lexed) {
   if (iframeLoaded) {
     $previewIframe.contentDocument.body.innerHTML = parsed;
@@ -339,6 +357,7 @@ function messageWorker(message) {
           var scrollPercent = getScrollPercent();
           setParsed(e.data.parsed, e.data.lexed);
           setScrollPercent(scrollPercent);
+          setResponseTime(e.data.time);
           break;
       }
       clearTimeout(checkChangeTimeout);
@@ -363,10 +382,16 @@ function messageWorker(message) {
     };
   }
   markedWorker.working = true;
+  workerTimeout(0);
+  markedWorker.postMessage(message);
+}
+
+function workerTimeout(seconds) {
   markedWorker.timeout = setTimeout(function () {
-    markedWorker.onerror('Marked is taking a while...');
+    seconds++;
+    markedWorker.onerror('Marked has taken longer than ' + seconds + ' second' + (seconds > 1 ? 's' : '') + ' to respond...');
+    workerTimeout(seconds);
   }, 1000);
-  markedWorker.postMessage(message);
 }
 checkForChanges();
 setScrollPercent(0);
diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -44,7 +44,9 @@ <h1>Marked Demo</h1>
             <option value="html">HTML Source</option>
             <option value="lexer">Lexer Data</option>
             <option value="quickref">Quick Reference</option>
-          </select>
+          </select> ·
+          Response Time:
+          <span id="responseTime"></span>
         </div>
 
         <div id="preview" class="pane">

diff --git a/docs/demo/worker.js b/docs/demo/worker.js
@@ -30,6 +30,7 @@ function parse(e) {
       });
       break;
     case 'parse':
+      var startTime = new Date();
       var lexed = marked.lexer(e.data.markdown, e.data.options);
       var lexedList = [];
       for (var i = 0; i < lexed.length; i++) {
@@ -40,12 +41,15 @@ function parse(e) {
         lexedList.push('{' + lexedLine.join(', ') + '}');
       }
       var parsed = marked.parser(lexed, e.data.options);
-
+      var endTime = new Date();
+      // setTimeout(function () {
       postMessage({
         task: e.data.task,
         lexed: lexedList.join('\n'),
-        parsed: parsed
+        parsed: parsed,
+        time: endTime - startTime
       });
+      // }, 10000);
       break;
   }
 }