async.ts 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /**
  2. * A disposable object
  3. */
  4. export interface IDisposable {
  5. /** 释放进程 */
  6. dispose(): void
  7. }
  8. /**
  9. * Execute the callback the next time the browser is idle, returning an
  10. * {@link IDisposable} that will cancel the callback when disposed. This wraps
  11. * [requestIdleCallback] so it will fallback to [setTimeout] if the environment
  12. * doesn't support it.
  13. *
  14. * @param callback The callback to run when idle, this includes an
  15. * [IdleDeadline] that provides the time alloted for the idle callback by the
  16. * browser. Not respecting this deadline will result in a degraded user
  17. * experience.
  18. * @param timeout A timeout at which point to queue no longer wait for an idle
  19. * callback but queue it on the regular event loop (like setTimeout). Typically
  20. * this should not be used.
  21. *
  22. * [IdleDeadline]: https://developer.mozilla.org/en-US/docs/Web/API/IdleDeadline
  23. * [requestIdleCallback]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
  24. * [setTimeout]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout
  25. */
  26. export let runWhenIdle: (callback: (idle: IdleDeadline) => void, timeout?: number) => IDisposable
  27. declare function requestIdleCallback(
  28. callback: (args: IdleDeadline) => void,
  29. options?: { timeout: number },
  30. ): number
  31. declare function cancelIdleCallback(handle: number): void
  32. if (typeof requestIdleCallback !== 'function' || typeof cancelIdleCallback !== 'function') {
  33. runWhenIdle = (runner) => {
  34. setTimeout(() => {
  35. if (disposed) {
  36. return
  37. }
  38. const end = Date.now() + 15 // one frame at 64fps
  39. runner(
  40. Object.freeze({
  41. didTimeout: true,
  42. timeRemaining() {
  43. return Math.max(0, end - Date.now())
  44. },
  45. }),
  46. )
  47. })
  48. let disposed = false
  49. return {
  50. dispose() {
  51. if (disposed) {
  52. return
  53. }
  54. disposed = true
  55. },
  56. }
  57. }
  58. } else {
  59. runWhenIdle = (runner, timeout?) => {
  60. const handle: number = requestIdleCallback(
  61. runner,
  62. typeof timeout === 'number' ? { timeout } : undefined,
  63. )
  64. let disposed = false
  65. return {
  66. dispose() {
  67. if (disposed) {
  68. return
  69. }
  70. disposed = true
  71. cancelIdleCallback(handle)
  72. },
  73. }
  74. }
  75. }
  76. /**
  77. * An implementation of the "idle-until-urgent"-strategy as introduced
  78. * 将计算过程推迟到浏览器空闲时运行,这可以避免在浏览器不空闲时执行计算操作,从而提高页面性能。
  79. * here: https://philipwalton.com/articles/idle-until-urgent/
  80. */
  81. export class IdleValue<T> {
  82. private readonly _executor: () => void
  83. private readonly _handle: IDisposable
  84. private _didRun = false
  85. private _value?: T
  86. private _error: unknown
  87. constructor(executor: () => T) {
  88. this._executor = () => {
  89. try {
  90. this._value = executor()
  91. } catch (err) {
  92. this._error = err
  93. } finally {
  94. this._didRun = true
  95. }
  96. }
  97. this._handle = runWhenIdle(() => this._executor())
  98. }
  99. /** 用于释放该对象 */
  100. dispose(): void {
  101. this._handle.dispose()
  102. }
  103. /** 用于获取计算后的值 */
  104. get value(): T {
  105. if (!this._didRun) {
  106. this._handle.dispose()
  107. this._executor()
  108. }
  109. if (this._error) {
  110. throw this._error
  111. }
  112. return this._value!
  113. }
  114. /** 用于检查该对象的值是否已经初始化过 */
  115. get isInitialized(): boolean {
  116. return this._didRun
  117. }
  118. }
  119. //#endregion