Guest User

Untitled

a guest
Sep 5th, 2018
564
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>wait test</title>
  6. <script>
  7.     let base = 0;
  8.     let count = 0;
  9.     let hwm = now();
  10.  
  11.     function visible_change()
  12.     {
  13.         ++count;
  14.         el = document.getElementById('count');
  15.         el.innerText = 'count: ' + count;
  16.     }
  17.  
  18.     function slow_task(n)
  19.     {
  20.         log('start slow task...');
  21.         note('start slow task...');
  22.         goal = now() + n;
  23.         while (now() < goal) ;
  24.         log('finish slow task');
  25.         note('finish slow task');
  26.         hwm = now();
  27.         enable_start();
  28.     }
  29.  
  30.     function call_after_RAF(fn)
  31.     {
  32.         note('using single requestAnimationFrame');
  33.         window.requestAnimationFrame(fn)
  34.     }
  35.  
  36.     function call_after_RAFRAF(fn)
  37.     {
  38.         note('using double requestAnimationFrame');
  39.         intermediate = function () { note('intermediate'); window.requestAnimationFrame(fn); }
  40.         window.requestAnimationFrame(intermediate);
  41.     }
  42.  
  43.     function call_after_RIC(fn)
  44.     {
  45.         note('using single requestIdleCallback');
  46.         window.requestIdleCallback(fn)
  47.     }
  48.  
  49.     function call_after_RICRIC(fn)
  50.     {
  51.         note('using double requestIdleCallback');
  52.         intermediate = function () { note('intermediate'); window.requestIdleCallback(fn); }
  53.         window.requestIdleCallback(intermediate);
  54.     }
  55.  
  56.     function call_after_STO(fn)
  57.     {
  58.         let to = get_number('timeout');
  59.         note('using setTimeout of ' + to);
  60.         setTimeout(fn, to);
  61.     }
  62.  
  63.     function call_after_STOSTO(fn)
  64.     {
  65.         let to = get_number('timeout');
  66.         note('using double setTimeout of ' + to);
  67.         intermediate = function () { note('intermediate'); setTimeout(fn, to); }
  68.         setTimeout(intermediate, to);
  69.     }
  70.  
  71.     function call_direct(fn)
  72.     {
  73.         note('using direct call');
  74.         fn();
  75.     }
  76.  
  77.     function call_slow_task(how)
  78.     {
  79.         delay = get_number('delay');
  80.         s = function () {slow_task(delay);};
  81.         visible_change();
  82.         disable_start();
  83.         if (how == 'STO')
  84.             call_after_STO(s);
  85.         else if (how == 'STOSTO')
  86.             call_after_STOSTO(s);
  87.         else if (how == 'RAFRAF')
  88.             call_after_RAFRAF(s);
  89.         else if (how == 'RAF')
  90.             call_after_RAF(s);
  91.         else if (how == 'RICRIC')
  92.             call_after_RICRIC(s);
  93.         else if (how == 'RIC')
  94.             call_after_RIC(s);
  95.         else if (how == 'direct')
  96.             call_direct(s);
  97.     }
  98.  
  99.     function clicked(evt, how)
  100.     {
  101.         if (base == 0)
  102.             set_base(evt);
  103.         if (evt.timeStamp + base < hwm)
  104.         {
  105.             log('old click @ ' + evt.timeStamp + ' ignored');
  106.             return false;
  107.         }
  108.         reset_notes();
  109.         log('click ' + how + ' timestamp:' + evt.timeStamp);
  110.         call_slow_task(how);
  111.         return true;
  112.     }
  113.  
  114.     function now() { return (new Date).getTime(); }
  115.  
  116.     function get_number(id)
  117.     {
  118.         let el = document.getElementById(id);
  119.         return +el.value;
  120.     }
  121.  
  122.     function log(txt)
  123.     {
  124.         let el = document.getElementById('log');
  125.         let ts = now() - base;
  126.         el.innerText = el.innerText + "\n" + ts + ': ' + txt;
  127.     }
  128.  
  129.     function clear_log()
  130.     {
  131.         let el = document.getElementById('log');
  132.         el.innerText = '';
  133.     }
  134.  
  135.     function note(txt)
  136.     {
  137.         let el = document.getElementById('notes');
  138.         let ts = now() - base;
  139.         el.innerText = el.innerText + "\n" + ts + ': ' + txt;
  140.     }
  141.  
  142.     function reset_notes()
  143.     {
  144.         let el = document.getElementById('notes');
  145.         el.innerText = '';
  146.     }
  147.  
  148.     function disable_start()
  149.     {
  150.         let els = document.getElementsByClassName('start');
  151.         for (let i = 0; i < els.length; ++i)
  152.             els[i].disabled = true;
  153.     }
  154.  
  155.     function enable_start()
  156.     {
  157.         let els = document.getElementsByClassName('start');
  158.         for (let i = 0; i < els.length; ++i)
  159.             els[i].disabled = false;
  160.     }
  161.  
  162.     function set_base(evt)
  163.     {
  164.         base = now() - evt.timeStamp;
  165.         log('base set to ' + base + ' from event timeStamp ' + evt.timeStamp);
  166.     }
  167. </script>
  168. </head><body>
  169. <div id='count'>count: 0</div>
  170. <div>timeout (ms): <input id='timeout' type='text' value='0'></div>
  171. <div>slow task delay (ms): <input id='delay' type='text' value='1000'></div>
  172. <div>
  173.     <input type='button' value='set base' onclick='set_base(event)'>
  174.     <input type='button' value='clear log' onclick='clear_log(event)'>
  175. </div>
  176. <hr/>
  177. </tr>
  178. <table>
  179. <tr>
  180.     <td><input id='direct' type='button' class='start' value='direct' onclick='return clicked(event, "direct")'></td>
  181.     <td></td>
  182.     <td></td>
  183. </tr>
  184. <tr>
  185.     <td><input id='STO' type='button' class='start' value='setTimeout' onclick='return clicked(event, "STO")'></td>
  186.     <td><input id='RAF' type='button' class='start' value='requestAnimationFrame' onclick='return clicked(event, "RAF")'></td>
  187.     <td><input id='RIC' type='button' class='start' value='requestIdleCallback' onclick='return clicked(event, "RIC")'></td>
  188. </tr>
  189. <tr>
  190.     <td><input id='STOSTO' type='button' class='start' value='double setTimeout' onclick='return clicked(event, "STOSTO")'></td>
  191.     <td><input id='RAF' type='button' class='start' value='double requestAnimationFrame' onclick='return clicked(event, "RAFRAF")'></td>
  192.     <td><input id='RICRIC' type='button' class='start' value='double requestIdleCallback' onclick='return clicked(event, "RICRIC")'></td>
  193. </tr>
  194. </table>
  195. <div id='notes'></div>
  196. <hr/>
  197. <div id='log'></div>
  198. </body>
  199. </html>
RAW Paste Data