关于eslint:setTimeout-与-setInterval-的最佳实践

背景

在 JavaScript 异步编程中，作者常常会写出各种各样的 bug，其中最常见的谬误，都是因为遗记革除 setTimeout 或者 setInterval 创立的定时器引起的。

思考上面这段代码，以一个简略的 React 组件为例

import {useEffect, useState} from 'react';
function App() {const [sec, setSec] = useState(0);
  useEffect(() => {setInterval(() => {setSec((s) => s + 1);
    }, 1000);
  }, []);
  return <p>{sec}</p>;
}
复制代码 

组件挂载后，每隔一秒会将 sec 的值加 1，看起来一切正常，然而，当组件被卸载的时候，setInterval 创立的定时器依然在继续运行。

经验丰富的读者应该能马上想到，咱们能够通过在 useEffect 返回的函数中革除这个定时器来修复这个问题。

改善后的代码如下：

import {useEffect, useState} from 'react';
function App() {const [sec, setSec] = useState(0);
  useEffect(() => {let timer = setInterval(() => {setSec((s) => s + 1);
    }, 1000);
    return () => {clearInterval(timer);
    };
  }, []);
  return <p>{sec}</p>;
}
复制代码 

问题到这里就完满解决了，然而，对于老手来说，经常须要在运行代码之后才会发现这个谬误，而且，在一些没有开发者调试工具的环境（例如挪动端 webview）下，相似的谬误常常被脱漏。

读到这里，有趣味的读者能够尝试在编辑器中对本人的某个我的项目源码进行搜寻，如果 setInterval 与 clearInterval 的搜寻后果数量不相等，那么，这个我的项目就很有可能暗藏了相似的谬误，同理，也实用于 setTimeout 与 clearTimeout。

因而，作者开发了一款 eslint 插件，让我的项目在编码期间，就能够打消相似的谬误。

解决办法

eslint-plugin-clean-timer

github 地址：https://github.com/littlee/es…

应用

第一步，在我的项目目录中装置 eslint 并初始化（已存在 eslint 配置请跳过这一步）

npm i -D eslint
npx eslint --init
复制代码 

第二步，装置 eslint-plugin-clean-timer

npm i -D eslint-plugin-clean-timer
复制代码 

并增加一下配置到 eslint 配置中，对于配置文件地位请参考 eslint.org/docs/user-g…

{"plugins": ["clean-timer"],
  "rules": {"clean-timer/assign-timer-id": 2}
}
复制代码 

此时，关上带有定时器代码的文件，咱们能够看到编辑器会对相干代码进行提醒，以 VSCode 为例，须要装置 ESLint 拓展

如果批改了配置文件之后没有失效，能够尝试按 Command(Ctrl)+Shift+P，在弹出面板中找到 ESLint: Restart ESLint Server 命令，并按回车键执行

除此之外，作者还提供了贴心的修复倡议，点击 ESLint 提醒的 Quick Fix…，执行第一个选项，能够主动插入一个赋值语句