JS BOM DOM 图片自动切换练习（setInterval）当中如何判断一个事件已经被触发，如何处理定时器连续开启的问题

最新推荐文章于 2022-06-17 19:15:01 发布

望屿

最新推荐文章于 2022-06-17 19:15:01 发布

阅读量219

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/darabiuz/article/details/115499313

版权

本文介绍了一个使用JavaScript和setInterval实现的图片自动切换功能。在点击按钮启动轮播模式后，当鼠标移出图片时应继续切换，但如何避免鼠标移出时立即触发切换并处理重复点击按钮开启多个定时器的问题？通过设置isclick标志变量和关闭旧定时器，实现了事件正确触发和防止定时器堆积。

摘要由CSDN通过智能技术生成

前提：
利用setInterval进行一个自动的4张图片的切换展示，点击button按钮开启轮播模式，如果用户想要暂停，则将鼠标移动到图片上，鼠标移出图片则继续轮播

（1）这里面有一个问题就是，我们想要的是用户点击了按钮才进行图片的自动切换，但是onmouseout事件会在浏览器加载完成时，只要用户的鼠标移出图片时便开启图片的自动切换。如何取消这个事件呢？

最简单的一个方法就是设置一个isclick判定值，如果按钮已经被点击，事件已经被触发，isclick就变成true，当它变为true的时候，才触发onmousemove事件

var isclick=false;
......
btn01.onclick=function(){
   
                isclick=true
.......
if(isclick==true){
   
                       clearInterval(timer);
                
                       img1.onmouseout=function(){
   
                            timer