xgqfrms / learning-javascript-with-mdn

Learning JavaScript with MDN / 使用 MDN 学习 JavaScript
https://learning-javascript-with-mdn.xgqfrms.xyz
MIT License
1 stars 0 forks source link

09. timer & console #9

Open xgqfrms opened 5 years ago

xgqfrms commented 5 years ago

timer & console

timer

https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Code_snippets/Timers

  1. setTimeout
  2. setInterval
  3. requestAnimationFrame

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

https://developer.mozilla.org/en-US/docs/Web/API/console/assert

https://developer.mozilla.org/en-US/docs/Web/API/Performance/now

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

image

IDLE

idle meaning in js

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/idle

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


// var handle = window.requestIdleCallback(callback[, options])
var handle = window.requestIdleCallback(
    (IdleDeadline) => console.log(`handle =`, window.handle, IdleDeadline),
    {
        timeout: 1000,// mm
    }
);

// handle = 13 IdleDeadline {didTimeout: false}

// didTimeout: false__proto__: IdleDeadlinedidTimeout: (...)timeRemaining: ƒ timeRemaining()constructor: ƒ IdleDeadline()Symbol(Symbol.toStringTag): "IdleDeadline"get didTimeout: ƒ didTimeout()__proto__: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

window.cancelIdleCallback(handle);

https://alligator.io/js/console-time-timeend/ https://flaviocopes.com/requestanimationframe/ https://css-tricks.com/using-requestanimationframe/ http://javascriptkit.com/javatutors/requestanimationframe.shtml

https://developers.google.com/web/updates/2012/08/When-milliseconds-are-not-enough-performance-now


console

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

https://developer.mozilla.org/en-US/docs/Web/API/console#Timers

  1. color css
  2. job ads
  3. table / format
xgqfrms commented 5 years ago

console.time & console.timeEnd

https://developer.mozilla.org/en-US/docs/Web/API/Console/time

https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd

https://stackoverflow.com/questions/12492979/how-to-get-the-output-from-console-timeend-in-js-console

// no necessary label, the default label is `default`

let log = console.log;

console.time();
log("Click to continue");
console.timeLog();
log("Do a bunch of other stuff...");
console.timeEnd();

image

let log = console.log;

console.time("answer time");
log("Click to continue");
console.timeLog("answer time");
log("Do a bunch of other stuff...");
console.timeEnd("answer time");

image

xgqfrms commented 5 years ago

demo

https://github.com/Advanced-Frontend/Daily-Interview-Question

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/253

function wait() {
  return new Promise(resolve =>
    setTimeout(resolve, 10 * 1000)
  )
}

async function main() {
  console.time();
  await wait();
  await wait();
  await wait();
  console.timeEnd();
}
main();
// Promise {<pending>}
// default: 30001.47412109375ms
xgqfrms commented 5 years ago

ascii text art

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

http://patorjk.com/software/taag/#p=display&h=0&v=0&f=Alpha&t=xgqfrms