js延时器setTimeout改造为定时器

最新推荐文章于 2024-05-29 15:14:06 发布

it_lin_web

最新推荐文章于 2024-05-29 15:14:06 发布

阅读量1.4k

点赞数 2

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

本文链接：https://blog.csdn.net/it_lin_web/article/details/81100620

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

it_lin_web

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js延时器setTimeout改造为定时器

js延时器setTimeout改造为定时器核心思维----利用回调函数改造，让setTimeout延时器执行自身回调函数&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定时器&lt;/title&
复制链接

扫一扫