javascript中定时器的开启和清除

最新推荐文章于 2024-04-18 19:21:41 发布

钱多多666

最新推荐文章于 2024-04-18 19:21:41 发布

阅读量695

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44519237/article/details/111780193

版权

javascript中定时器的开启和清除

界面
按钮的点击事件

<body>  
        <button id="bid" class="b1" onclick="random()">开始</button>
</body>

点击事件的函数

function random(){
        var did2 = document.getElementById("did2"); //名字选取框
        var bid = document.getElementById("bid"); 	//按钮
        var mytime = null;
        if(bid.getAttribute("class")=="b1"){	//按键为开始
            bid.style.backgroundColor = "red";
            bid.setAttribute("class","b2");
            bid.innerHTML = "停止";
            var i = 0;
            mytime = setInterval(function(){	//通过定时器每20ms更改名字选取框内容
                did2.innerHTML = list[i];		//list为名单信息，用来替换名字选取框内容
                i++;
                if(i == 11){					//list信息遍历到底，从新开始遍历
                    i = 0;
                }
            }, 20);
        }else if(bid.getAttribute("class")=="b2"){	//按键为停止
            bid.style.backgroundColor = "greenyellow";
            bid.setAttribute("class","b1");
            bid.innerHTML = "开始";
            clearInterval(mytime);			//清除定时器
        }

遇到的问题

当点击停止键时，定时器不会清除

原因

setTimeout函数和clearInterval函数出现在两个if语句中
在这里插入图片描述

解决方法

将两个函数写到一个if语句中
在这里插入图片描述这样问题就解决了！！

钱多多666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中定时器的开启和清除

javascript中定时器的开启和清除界面按钮的点击事件<body> <button id="bid" class="b1" onclick="random()">开始</button></body>点击事件的函数function random(){ var did2 = document.getElementById("did2"); //名字选取框 var bid = d
复制链接

扫一扫