setInterval 多次点击后清除失败

最新推荐文章于 2023-01-04 16:21:14 发布

大可大可抖

最新推荐文章于 2023-01-04 16:21:14 发布

阅读量414

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/p930318/article/details/109640102

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

多个定时器一起跑就会有这个问题，打开之前先关闭一个

应用场景，点击打开dom抖动，点击关闭dom抖动

<style>
        *{margin: 0; padding: 0;}
        .name{
            background: turquoise;
            height: 100px;
            width: 100px;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        .btn{
            position: absolute;
            left: 0;
            top: 120px; 
        }
    </style>

<body>
    <div id="name" class="name"></div>
    <div class="btn">
        <button id="on">点击抖动</button>
        <button id="off">关闭抖动</button>
    </div>
</body>

<script>
    //3. dom点击抖动

    let div1 = document.getElementById('name');
    let onbut = document.getElementById('on');
    let offbut = document.getElementById('off');
    let timer =null 
    onbut.onclick =function(){
        clearInterval(timer)
        timer = setInterval(function(){
            div1.style.left = Math.random() * 10 + 'px';
            div1.style.top = Math.random() * 10 + 'px';
        },30)
    }
    offbut.onclick =function(){
        console.log('点击了清除')
        clearInterval(timer)
    }
</script>

重点在点击时先清除timer定时器