js延时器setTimeout改造为定时器

it_lin_web

于 2018-07-18 16:38:21 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js setTimeout 延时器定时器回调函数

本文链接：https://blog.youkuaiyun.com/it_lin_web/article/details/81100620

js 专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>