javascript - 为什么把 clearInterval 放在外面清除不了 setInterval
本文介绍了javascript - 为什么把 clearInterval 放在外面清除不了 setInterval的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
谁能帮我一步步分析下JS的 " onmousedown事件 " 代码,指出问题所在.源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body,div,ul,li{
padding: 0;
margin: 0;
font-size: 0;
letter-spacing: -4px;
position: relative;
}
div.all{
width: 400px;
height: 12000px;
margin: 0 auto;
border: 1px solid black;
/*overflow: hidden;*/
}
div span.totop{
display: block;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
position: fixed;
text-align: center;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 20px;
letter-spacing: 0;
left: 50%;
bottom: 50px;
margin-left: -30px;
}
</style>
</head>
<body>
<div class="all">
<span class="totop">顶部</span>
</div>
<script type="text/javascript">
var spanTotop= document.querySelector("span.totop");
var itimerAnother,
iPosition;
window.onscroll= function(){
iPosition= document.documentElement.scrollTop|| document.body.scrollTop;
console.log(iPosition);
}
spanTotop.onmousedown= function(){
iPosition= document.documentElement.scrollTop|| document.body.scrollTop;
itimerAnother= setInterval(function(){
iPosition= iPosition- Math.ceil(iPosition/ 10);
document.documentElement.scrollTop= iPosition;
document.body.scrollTop= iPosition;
},10);
if(iPosition<= 0){
clearInterval(itimerAnother);
// 为什么把 clearInterval 放在外面清除不了 setInterval -------------------------
// 放在 setInterval 里面就可以 ---------------------------
}
}
</script>
</body>
</html>
先谢谢了...
解决方案
从新解释一下，在第一次mousedown的时候，假如iPosition大于0，此时不会执行clearInterval，执行setInterval，此时itimerAnother为1，会一直执行下去。不会停止，此时再次点击mousedown，假如iPosition等于0，会又一次执行setInterval，此时itimerAnother为2，并且会立刻clearInterval掉，但是itimerAnother为1的对象一直都没有clearInterval掉，所以也不会停下来,要想解决这个问题，你把clearInterval(itimerAnother-1);加到clearInterval(itimerAnother)前面就可以了，
又试了一下，即使放到setInterval里面，你在iPosition向上滚动的时候，连续触发mousedown也会出现bug，解决方案有两个第一个，clearInterval放到setInterval里面，然后点击一次后禁止再触发mousedown，第二种方法onmosuedown改成下面的
var arr = []
spanTotop.onmousedown= function(){
iPosition= document.documentElement.scrollTop|| document.body.scrollTop;
itimerAnother= setInterval(function(){
console.log(itimerAnother)
iPosition= iPosition- Math.ceil(iPosition/ 10);
document.documentElement.scrollTop= iPosition;
document.body.scrollTop= iPosition;
if(iPosition<= 0){
console.log(itimerAnother + 'haha')
// 在这里需要clear掉所有创建的setInterval
arr.forEach(function(ele) {
clearInterval(ele)
})
}
},10);
arr.push(itimerAnother)
}这篇关于javascript - 为什么把 clearInterval 放在外面清除不了 setInterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
