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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13376334.html
未经授权禁止转载,违者必究!