js延时器setTimeout改造为定时器

原创于 2018-07-18 16:38:21 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #setTimeout #延时器 #定时器 #回调函数

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用JavaScript将setTimeout延时器改造成一个简单的定时器应用。通过递归调用自身实现持续计时功能，并演示了如何通过按钮控制计时器的启动与停止。

js延时器setTimeout改造为定时器

核心思维----利用回调函数改造，让setTimeout延时器执行自身回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>

<input type="button" value="开始计时" id="btn">
<input type="text" id="txt" value="0">
<input type="button" value="停止计时" id="btn2">

<script>
    //获取元素
    var btn = document.getElementById('btn');
    var btn2 = document.getElementById('btn2');
    var txt = document.getElementById('txt');
    //注册事件
    //开始计时
    btn.onclick = timedCount;
    //停止计时
    btn2.onclick = function () {
        clearTimeout(timer);
        btn.disabled = false;
    }

    var c = 0;
    var timer;
    function timedCount() {
        btn.disabled = true;
        txt.value = c;
        c += 1;
        //延时1s执行程序，执行自身函数timedCount
        timer = setTimeout(timedCount, 1000);
    }
</script>
</body>
</html>