xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

JavaScript 中如何使用 setTimeout 模拟实现 setInterval All In One

JavaScript 中如何使用 setTimeout 模拟实现 setInterval All In One

website multi content page

setIntervalSimulator

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-07-27
 * @modified
 *
 * @description setInterval
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
 * @solutions
 *
 */

const log = console.log;

const setIntervalSimulator = (callback, time, count = 10) => {
  function interval(callback, time) {
    const begin = new Date().getTime();
    const timerID = setTimeout(() => {
      clearTimeout(timerID);
      const end = new Date().getTime();
      log(`time =`, (end - begin) / 1000);
      // 排除 callback 执行时间的干扰
      callback();
      // 同步执行
      if(count) {
        log(`count =`, count);
        count--;
        interval(callback, time);
      }
    }, time);
  }
  // init
  interval(callback, time);
  // requestAnimationFrame();
}

// setIntervalSimulator(() => console.log(`OK`), 1000 * 10);
// setIntervalSimulator(() => console.log(`OK`), 1000 * 3);
// setIntervalSimulator(() => console.log(`OK`), 10);
setIntervalSimulator(() => console.log(`OK 1000`), 1000);
// setIntervalSimulator(() => console.log(`OK 0`), 0);



// time = 1.005
// OK 1000
// count = 10
// time = 1.002
// OK 1000
// count = 9
// time = 1.005
// OK 1000
// count = 8
// time = 1.003
// OK 1000
// count = 7
// time = 1.005
// OK 1000
// count = 6
// time = 1.002
// OK 1000
// count = 5
// time = 1.004
// OK 1000
// count = 4
// time = 1.004
// OK 1000
// count = 3
// time = 1.005
// OK 1000
// count = 2
// time = 1.005
// OK 1000
// count = 1
// time = 1.003
// OK 1000


setTimeoutSimulator


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-07-27
 * @modified
 *
 * @description setTimeout
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
 * @solutions
 *
 */

const log = console.log;

const setTimeoutSimulator = (callback, time) => {
  const begin = new Date().getTime();
  // const begin = performance.now();
  // ReferenceError: performance is not defined
  const timerID = setInterval(() => {
    clearInterval(timerID);
    const end = new Date().getTime();
    // const end = performance.now();
    log(`time =`, (end - begin) / 1000);
    // 排除 callback 执行时间的干扰
    callback();
  }, time);
}

// setTimeoutSimulator(() => console.log(`OK`), 1000 * 10);
// setTimeoutSimulator(() => console.log(`OK`), 1000 * 3);
// setTimeoutSimulator(() => console.log(`OK`), 10);
setTimeoutSimulator(() => console.log(`OK 1000`), 1000);
setTimeoutSimulator(() => console.log(`OK 0`), 0);


// OK 0
// time = 0.006
// OK 1000
// time = 1.003

// OK 0
// time = 0.006
// OK 1000
// time = 1.006

// OK 0
// time = 0.007
// OK 1000
// time = 1.002


js 函数返回值, timoutID

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

blank page

打印的是什么? event order id ?

Symbol

Symbol 实现原理, uuid


 key1 = Symbol(`key`);
// Symbol(key)
 key2 = Symbol(`key`);
// Symbol(key)

 key1 == key2;
// false
 key1 === key2;
// false

js 实现 每间隔一秒,打印一个数组元素

简单 js 基础面试题


// js 实现 每间隔一秒,打印一个数组元素

let arr = [1,2,3];
let i = 0;
let timer = setInterval(() => {
  console.log(arr[i++]);
  if(arr.length === i) {
    clearInterval(timer);
  }
}, 1000);


// function es5Func (arr) {
//   // var hoisting bug
//   for (var i = 0; i < arr.length; i++) {
//     setTimeout(function (){
//       console.log('item, i =', arr[i], i);
//     }, (i + 1) * 1000);
//   }
// }
// es5Func([1, 2, 3]);

function es5Func (arr) {
  // var hoisting bug
  for (var i = 0; i < arr.length; i++) {
    // closure & IIFE
    (function(i) {
      setTimeout(function (){
        console.log('item, i =', arr[i], i);
      }, (i + 1) * 1000);
    })(i);
  }
}
es5Func([1, 2, 3]);


// const es6Func = (arr = []) => {
//   for (let [i, item] of arr.entries()) {
//     setTimeout(() => {
//       console.log('i, item =', i, item);
//     }, (i + 1) * 1000);
//   }
// }
// es6Func([1, 2, 3]);



const es6Func = (arr = []) => {
  for (let item of arr) {
    setTimeout(() => {
      console.log('item =', item);
    }, (arr.indexOf(item) + 1) * 1000);
    // setTimeout(() => {
    //   console.log('item =', item);
    // }, item * 1000);
  }
}
es6Func([1, 2, 3]);


refs

https://javascript.info/settimeout-setinterval

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout



©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @ 2020-07-25 12:53  xgqfrms  阅读(524)  评论(5编辑  收藏  举报