javascript - 回调函数触发不正常
本文介绍了javascript - 回调函数触发不正常的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在做一个轮播进度条的效果！可是回调函数(也就是定时器)触发不正常！全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
cursor: default;
}
.box {
position: relative;
width: 400px;
height: 225px;
background-color:#dedede;
border:1px solid #ededed;
}
.btm {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
text-align: center;
background-color: #fff;
}
.btm:after {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.item {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 100%;
background-color: #dedede;
vertical-align: middle;
transition: all 0.3s ease-in 0s;
cursor: pointer;
}
.item.active {
width: 17px;
border-radius: 7px;
background-color: #4aca6d;
cursor: default;
}
</style>
</head>
<body>
<div class="box">
<div class="btm">
<span class="item active" data-index="0"></span>
<span class="item" data-index="1"></span>
<span class="item" data-index="2"></span>
<span class="item" data-index="3"></span>
<span class="item" data-index="4"></span>
</div>
</div>
<script>
var i = 0;
var auto = true;
var d = document.querySelectorAll('.item');
var dl = setInterval("autoLoop(delay)",3000);
var delay = function () {
dl = setInterval("autoLoop(delay)",3000);
};
var pause = function() {
clearInterval(dl);
};
[].forEach.call(d, function(e) {
pause();
e.addEventListener('click',function(event) {
clickLoop(e,delay);
},false);
});
function autoLoop (callback) {
pause();
if (i == 4) {
d[i].classList.remove('active');
i = 0;
d[i].classList.add('active');
} else {
d[i].classList.remove('active');
i ++;
d[i].classList.add('active');
}
callback();
};
function clickLoop (e,callback) {
var eles = e.parentNode.childNodes;
[].forEach.call(eles,function(ele) {
if(ele.nodeType == 1 && ele != e) {
ele.classList.remove('active');
}
})
e.classList.add('active');
i = e.getAttribute('data-index');
console.log(i);
callback();
};
</script>
</body>
</html>直接复制粘贴就能工作，请问是哪里出了问题？哪里没有理解清楚？谢谢！
解决方案
[].forEach.call(d, function(e) {
pause(); // 这个把dl清除了
e.addEventListener('click',function(event) {
clickLoop(e,delay);
},false);
});改成
[].forEach.call(d, function(e) {
//pause();
e.addEventListener('click',function(event) {
pause();
clickLoop(e,delay);
},false);
});这篇关于javascript - 回调函数触发不正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
