526互联

关于vue 使用setInterval定时器关闭失效的问题 原因为事件传播

发布时间 2023-06-15 16:58:15作者: 马铃薯头抽雪茄
/**
** data.isPlay为显示那个按钮
** startHandle开始定时器 setInterval
** pauseHandle,stopHandle理解为关闭定时器就好了clearInterval
**/
<view class="btn" @click.stop="startHandle">
    <view class="btn-status btn-play">
        <view class="char" v-if="!data.isPlay">▶</view>
        <view v-else-if="data.isPlay">
            <view class="char">{{ data.count }}</view>
            <view class="btn-wrap">
                <view class="btn-s pause" @click.stop="pauseHandle">
                    <view class="btn-inner">||</view> 
                </view>
                <view class="btn-s stop" @click.stop="stopHandle">
                    <view class="btn-inner">■</view> 
                </view>
            </view>
        </view>
    </view>
</view>

本来代码上的点击事件为@click 然后让我点击触发关闭的按钮时

我觉得是他切换isPlay的状态然后显示了触发开始的按钮同时也点击了进去导致了这个定时器又重新触发了

导致情况看起来像是没有关闭的样子

然后改为@click.stop阻止事件传播可以解决这个问题

如果不是这个原因可以留言告诉我下 共同进步~