How to use JavaScript to implement precise setTimeout and setInterval

How to use JavaScript to implement precise setTimeout and setInterval

如何使用 JavaScript 实现精确的 setTimeout 和 setInterval

setTimeoutPreciseSimulator & setIntervalPreciseSimulator

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-07-0
 * @modified
 *
 * @description 使用 JavaScript 实现精确的 setTimeout 和 setInterval
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 */

const log = console.log;

// 同步: 使用 js 实现精确的 setTimeout
function setTimeoutPreciseSimulator(callback, time = 0) {
  const begin = new Date().getTime();
  while (true) {
    const end = new Date().getTime();
    if(end - begin >= time) {
      log(`end - begin`, end - begin);
      callback();
      break;
    }
  }
}

// 同步: 使用 js 实现精确的 setInterval
function setIntervalPreciseSimulator(callback, time = 0, count = 10) {
  function interval(callback, time) {
    const begin = new Date().getTime();
    while (true) {
      const end = new Date().getTime();
      if(end - begin >= time) {
        log(`end - begin`, end - begin);
        callback();
        break;
      }
    }
    if(count) {
      log(`\ncount =`, count);
      count--;
      interval(callback, time);
    }
  }
  // init
  interval(callback, time);
}

// setTimeoutPreciseSimulator(() => console.log(`OK 1000`), 1000)
// end - begin 1000
// OK 1000

setIntervalPreciseSimulator(() => console.log(`OK 1000`), 1000)

// end - begin 1000
// OK 1000

// count = 10
// end - begin 1000
// OK 1000

// count = 9
// end - begin 1000
// OK 1000

// count = 8
// end - begin 1000
// OK 1000

// count = 7
// end - begin 1000
// OK 1000

// count = 6
// end - begin 1000
// OK 1000

// count = 5
// end - begin 1000
// OK 1000

// count = 4
// end - begin 1000
// OK 1000

// count = 3
// end - begin 1000
// OK 1000

// count = 2
// end - begin 1000
// OK 1000

// count = 1
// end - begin 1000
// OK 1000

requestAnimationFrame bug

requestAnimationFrame bug ? can not pass params

// bug ? can not pass params

function requestAnimationFramePreciseSimulator(callback, time = 0, count = 10) {
  // function interval(callback, time) {
  function interval() {
    const begin = new Date().getTime();
    while (true) {
      const end = new Date().getTime();
      if(end - begin >= time) {
        log(`end - begin`, end - begin);
        callback();
        break;
      }
    }
    if(count) {
      log(`\ncount =`, count);
      count--;
      requestAnimationFrame(interval);
      // window.requestAnimationFrame(interval);
    }
  }
  // init
  requestAnimationFrame(interval);
  // window.requestAnimationFrame(interval);
  // ReferenceError: requestAnimationFrame is not defined
}

// requestAnimationFramePreciseSimulator(() => console.log(`OK 1000`), 1000)

window.requestAnimationFrame(callback);

// pass 参数???

window.requestAnimationFrame(callback(args));

window.requestAnimationFrame(callback, args);

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

https://caniuse.com/#feat=requestanimationframe

requestAnimationFrame

function repeatOften() {
  // do whatever
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

https://css-tricks.com/using-requestanimationframe/

refs

https://www.cnblogs.com/xgqfrms/p/11399442.html

https://javascript.info/settimeout-setinterval

https://stackoverflow.com/questions/29971898/how-to-create-an-accurate-timer-in-javascript

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---