用户手残之重复触发定时器或延时器

2022-09-11 87 阅读1分钟

场景：

当封装一个需要用户交互之后才创建一个定时器或延时器的功能时，避免用户手残重复创建多个定时器或延时器

举例: 封装一个用户点击开始计时的功能

非常low的写法

<body>
    <button>开始</button>
    <p>0</p>
</body>
<script>
    const btn = document.querySelector('button');
    const p = document.querySelector('p');
    let time = 0;
    btn.addEventListener('click', () => {
        setInterval(() => {
            time++;
            p.innerText = `${time}秒`
        }, 1000);
    }, false);
</script>

以上写法弊端：当用户重复点击会创建多余的定时器或延时器，不仅功能失效，还占用网页性能

改良版

    const btn = document.querySelector('button');
    const p = document.querySelector('p');
    let time = 0;
    let timer = null;
    btn.addEventListener('click', () => {
        if (!timer) {
            timer = setInterval(() => {
                time++;
                p.innerText = `${time}秒`;
            }, 1000)
        }
    }, false);

我们可以在外部声明一个存放定时器的变量timer,通过判断定时器的有无来决定是否创建定时器

最终版