解决定时器加速的问题

作者: ticktackkk | 来源:发表于2020-04-03 15:32 被阅读0次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 class="random"></h1>
    <input type="button" value="开始" onclick="start()">
    <input type="button" value="暂停" onclick="stop()">

    <script>
        var names = [
            '许澄邈', '刘德泽', '程海超', '邓海阳',
            '邓海荣', '陈海逸', '宋海昌', '徐瀚钰',
            '徐瀚文', '陈涵亮', '程涵煦', '宋明宇'
        ];
        var myshow = document.getElementsByClassName('random')[0];
        function suiji() {
            myshow.innerHTML = names[parseInt(Math.random() * names.length)];
        }
        flag = true;
        function start() {
            if (flag) {
                time = setInterval(suiji, 100);
            }
            flag = false;//解决定时器多次点击加速的问题
        }
        function stop() {
            flag = true;
            clearInterval(time);
        }
        suiji();
    </script>
</body>
</html>