老师,为什么我删除按钮点3次,取消删除也点了3次,最后div里面的内容还是会被清空

老师,为什么我删除按钮点3次,取消删除也点了3次,最后div里面的内容还是会被清空

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>定时器</title>

    <style type="text/css">

        div{width:400px;height:120px;margin-top:50px;border:2px solid gray;padding:10px;}

    </style>

</head>

<body>

     <input type="button" value="删除">

     <input type="button" value="取消删除">

    <div>点击"删除"按钮后,里面的内容将在3秒钟后消失;<br/><br/>如点击了"删除"后又不想删除内容,请在点击"删除"按钮3秒之内点击"取消删除"按钮即可</div>

    <script type="text/javascript">

       //补充代码

       let btn1 = document.getElementsByTagName("input")[0],

       btn2 = document.getElementsByTagName("input")[1],

       div = document.getElementsByTagName("div")[0]

       let times;

       btn1.onclick = function(){

            times = setInterval(function(){

                div.innerHTML = "";

            },3000)

       }

       btn2.onclick = function(){

            clearTimeout(times);

       }

    </script>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2020-07-22 10:02:10

同学你好,连续点击三次删除,会创建3个定时器,分别为1,2,3,那么点击取消定时器,只能取消最后一次的。同学可以按照如下进行测试,帮助自己去理解:

http://img1.sycdn.imooc.com//climg/5f179d28099e836c05330416.jpg

分别输出一下,创建的定时器,可以删除的定时器,然后定时器里面输出一点内容,看看最后执行了什么。如下,点击三次删除,三次取消。创建了三个定时器,1,2,3。定时器3被取消了3次,等待一会,一直输出test则表明,前两个定时器并不会被取消。

http://img1.sycdn.imooc.com//climg/5f179d8d09bc658202560223.jpg

这里可以特殊记一下。另外,实际测试时,只点击删除一次,取消一次就可以。代码是没有问题的。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师