zoukankan      html  css  js  c++  java
  • 不要覆盖标准方法

    需求:

    页面不可见时,例如切换浏览器页签、最小化浏览器,暂停所有定时器;页面显示时,再启动定时器。


    一个解决方案如下:

    const uuid = (() => {
      let no = 0;
      return () => no++;
    })();
    
    const originSetInterval = window.setInterval;
    const originClearInterval = window.clearInterval;
    
    const timers = [];
    const startTimers = () =>
      timers.forEach(t => {
        t.originIntervalId = originSetInterval(
          t.fn,
          t.ms
        );
      });
    const stopTimers = () =>
      timers.forEach(t => {
        originClearInterval(t.originIntervalId);
      });
    
    document.addEventListener(
      "visibilitychange",
      () =>
        document.visibilityState === "visible"
          ? startTimers()
          : stopTimers()
    );
    
    window.setInterval = (fn, ms) => {
      const originIntervalId =
        document.visibilityState === "visible"
          ? originSetInterval(fn, ms)
          : undefined;
      const id = uuid();
      timers.push({
        fn,
        ms,
        originIntervalId,
        id
      });
      return id;
    };
    
    window.clearInterval = id => {
      const t = timers.find(t => t.id === id);
      originClearInterval(t.originIntervalId);
      timers.splice(timers.indexOf(t), 1);
    };
    

    覆写 setIntervalclearInterval,不用改已有代码,所有定时器就都能自动启停。


    但我不推荐在项目中这么做,宁愿麻烦点,写个 setSmartInterval ,全局替换 setInterval。原因有很多,例如:

    • 可能影响第三方库
    • 没法再用原生的 setInterval
    • 新人培训成本增加
    • ……

    其中,我最看重的是:这么做导致 代码行为出人意料。当一个东西和经验认知不一样时,使用它要付出更多的思考。「Don't make me think」对于代码设计同样重要。

  • 相关阅读:
    getBoundingClientRect()方法
    Sublime Text3 安装less
    less知识点总结(一)
    跨域知识(二)——JSONP
    面向过程和面向对象的区别(转)
    暴力+DP:买卖股票的最佳时机
    车的可用捕获量(3.26leetcode每日打卡)
    三维形体的表面积(3.25leetcode每日打卡)
    基础练习:FJ的字符串
    DP:打家劫舍
  • 原文地址:https://www.cnblogs.com/apolis/p/12526250.html
Copyright © 2011-2022 走看看