计时器 - JavaScript 挑战

大家好，我们又见面了啊~本文《计时器 - JavaScript 挑战》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

您可以在 github 仓库中找到这篇文章中的所有代码。

异步编程定时器相关的挑战

有时间限制的缓存

class timelimitedcache {
  constructor() {
    this._cache = new map();
  }

  set(key, value, duration) {
    const found = this._cache.has(key);

    if (found) {
      cleartimeout(this._cache.get(key).ref);
    }

    this._cache.set(key, {
      value,
      ref: settimeout(() => {
        this._cache.delete(key);
      }, duration),
    });

    return found;
  }

  get(key) {
    if (this._cache.has(key)) {
      return this._cache.get(key);
    } else {
      return -1;
    }
  }

  count() {
    return this._cache.size;
  }
}

// usage example
const timelimitedcache = new timelimitedcache();
console.log(timelimitedcache.set(1, 'first', 1000)); // => false
console.log(timelimitedcache.get(1).value); // => 'first'
console.log(timelimitedcache.count()); // => 1 
settimeout(() => {
  console.log(timelimitedcache.count()); // => 0
  console.log(timelimitedcache.get(1)); // => -1
}, 2000);

取消间隔

/**
 * @param {function} callback
 * @param {number} delay
 * @param {...any} args
 * @returns {function}
 */
function setcancellableinterval(callbackfn, delay, ...args) {
  const timerid = setinterval(callbackfn, delay, ...args);

  return () => {
    clearinterval(timerid);
  };
}

// usage example
let i = 0;
// t = 0:
const cancel = setcancellableinterval(() => {
  i++;
}, 100);
// t = 50:
cancel();
// t = 100: i is still 0 because cancel() was called.

取消超时

/**
 * @param {function} callbackfn
 * @param {number} delay
 * @param {...any} args
 * @returns {function}
 */
function setcancellabletimeout(callbackfn, delay, ...args) {
  const timerid = settimeout(callbackfn, delay, ...args);

  return () => {
    cleartimeout(timerid);
  };
}

// usage example
let i = 0;
// t = 0:
const cancel = setcancellabletimeout(() => {
  i++;
}, 100);
// t = 50:
cancel();
// t = 100: i is still 0 because cancel() was called.

清除所有超时定时器

/**
 * cancel all timer from window.settimeout
 */

const timerqueue = [];

const originalsettimeout = window.settimeout;

window.settimeout = function (callbackfn, delay, ...args) {
  const timerid = originalsettimeout(callbackfn, delay, ...args);
  timerqueue.push(timerid);

  return timerid;
}


function clearalltimeout() {
  while (timerqueue.length) {
    cleartimeout(timerqueue.pop());
  }
}


// usage example
settimeout(func1, 10000)
settimeout(func2, 10000)
settimeout(func3, 10000)
// all 3 functions are scheduled 10 seconds later
clearalltimeout()
// all scheduled tasks are cancelled.

去抖动

/**
 * @param {function} fn 
 * @param {number} wait 
 * @return {function}
 */

function debounce(fn, wait = 0) {
  let timerid = null;

  return function (...args) {
    const context = this;
    cleartimeout(timerid);

    timerid = settimeout(() => {
      timerid = null;
      fn.call(context, ...args);
    }, wait);
  }
}


// usage example
let i = 0;
function increment() {
  i += 1;
}
const debouncedincrement = debounce(increment, 100);

// t = 0: call debouncedincrement().
debouncedincrement(); // i = 0

// t = 50: i is still 0 because 100ms have not passed.
//  call debouncedincrement() again.
debouncedincrement(); // i = 0

// t = 100: i is still 0 because it has only
//  been 50ms since the last debouncedincrement() at t = 50.

// t = 150: because 100ms have passed since
//  the last debouncedincrement() at t = 50,
//  increment was invoked and i is now 1 .

风门

/**
 * @param {function} fn 
 * @param {number} wait 
 * @return {function}
 */

function throttle(fn, wait = 0) {
  let shouldthrottle = false;

  return function (...args) {
    if (shouldthrottle) {
      return;
    }

    shouldthrottle = true;
    settimeout(() => {
      shouldthrottle = false;
    }, wait);

    fn.call(this, ...args);
  }
}

// usage example
let i = 0;
function increment() {
  i++;
}
const throttledincrement = throttle(increment, 100);

// t = 0: call throttledincrement(). i is now 1.
throttledincrement(); // i = 1

// t = 50: call throttledincrement() again.
//  i is still 1 because 100ms have not passed.
throttledincrement(); // i = 1

// t = 101: call throttledincrement() again. i is now 2.
//  i can be incremented because it has been more than 100ms
//  since the last throttledincrement() call at t = 0.
throttledincrement(); // i = 2

重复间隔

const url = 'https://fastly.picsum.photos/id/0/5000/3333.jpg?hmac=_j6ghy5fcfsd6tvtcv74zxivkjspifr9b8w34xeqmvu';

function fetchdata(url) {
  return fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new error(`error: ${response.status}`);
      }

      return response.blob();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((err) => {
      console.log(`error: ${err}`);
    });
}

function repeat(callbackfn, delay, count) {
  let currentcount = 0;

  const timerid = setinterval(() => {
    if (currentcount < count) {
      callbackfn();
      currentcount += 1;
    } else {
      clearinterval(timerid);
    }
  }, delay);

  return {
    clear: () => clearinterval(timerid),
  }
}

// usage example
const cancel = repeat(() => fetchdata(url), 2000, 5);
settimeout(() => {
  cancel.clear();
}, 11000);

可恢复间隔

/**
 * @param {function} callbackfn
 * @param {number} delay
 * @param {...any} args
 * @returns {{start: function, pause: function, stop: function}}
 */

function createresumableinterval(callbackfn, delay, ...args) {
  let timerid = null;
  let stopped = false;

  function cleartimer() {
    clearinterval(timerid);
    timerid = null;
  }

  function start() {
    if (stopped || timerid) {
      return;
    }

    callbackfn(...args);
    timerid = setinterval(callbackfn, delay, ...args);
  }

  function pause() {
    if (stopped) {
      return;
    }

    cleartimer();
  }

  function stop() {
    stopped = true;
    cleartimer();
  }

  return {
    start,
    pause,
    stop,
  };
}

// usage example
let i = 0;
// t = 0:
const interval = createresumableinterval(() => {
  i++;
}, 10);
// t = 10:
interval.start(); // i is now 1.
// t = 20: callback executes and i is now 2.
// t = 25:
interval.pause();
// t = 30: i remains at 2 because interval.pause() was called.
// t = 35:
interval.start(); // i is now 3.
// t = 45: callback executes and i is now 4.
// t = 50:
interval.stop(); // i remains at 4.

实现 setinterval()

/**
 * @param {function} callbackfn
 * @param {number} delay
 * @return {object}
 */

// use `requestanimationframe`
function mysetinterval(callbackfn, delay) {
  let timerid = null;
  let start = date.now();

  // loop
  function loop() {
    const current = date.now();

    if (current - start >= delay) {
      callbackfn();
      start = current;
    }

    timerid = requestanimationframe(loop);
  }

  // run loop
  loop();

  return {
    clear: () => cancelanimationframe(timerid),
  }
}


const interval = mysetinterval(() => {
  console.log('interval tick');
}, 1000);

// cancel
settimeout(() => {
  interval.clear();
}, 5000);



// use `settimeout`
function mysetinterval(callbackfn, delay) {
  let timerid = null;
  let start = date.now();
  let count = 0;

  // loop
  function loop() {
    const drift = date.now() - start - count * delay;
    count += 1;

    timerid = settimeout(() => {
      callbackfn();
      loop();
    }, delay - drift);
  }

  // run loop
  loop();

  return {
    clear: () => cleartimeout(timerid),
  }
}

const interval = mysetinterval(() => {
  console.log('interval tick');
}, 1000);

// cancel
settimeout(() => {
  interval.clear();
}, 5000);

实现 settimeout()

function setTimeout(callbackFn, delay) {
  let elapsedTime = 0;
  const interval = 100;

  const intervalId = setInterval(() => {
    elapsedTime += interval;

    if (elapsedTime >= delay) {
      clearInterval(intervalId);
      callbackFn();
    }
  }, interval);
}

// Usage example
mySetTimeout(() => {
  console.log('This message is displayed after 2 seconds.');
}, 2000);

参考

• 窗口：settimeout() 方法 - mdn
• 窗口：setinterval() 方法 - mdn
• 窗口：clearinterval() 方法 - mdn
• 窗口：cleartimeout() 方法 - mdn
• 2715。超时取消 - leetcode
• 2725。间隔取消 - leetcode
• 2622。有时间限制的缓存 - leetcode
• 2627。反跳 - leetcode
• 2676。油门 - leetcode
• 速率限制 - wikipedia.org
• 28。实现clearalltimeout() - bfe.dev
• 4.实现基本的throttle() - bfe.dev
• 5.使用前导和尾随选项实现throttle() - bfe.dev
• 6.实现基本的 debounce() - bfe.dev
• 7.使用前导和尾随选项实现 debounce() - bfe.dev
• javascript 异步：练习、实践、解决方案 - w3resource
• 伟大的前端

本篇关于《计时器 - JavaScript 挑战》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！