首頁猿問第二次點(diǎn)擊就掛了

第二次點(diǎn)擊就掛了

JavaScript

qq_sU_4 2016-06-19 21:01:53

<!DOCTYPE?html> <html> <head> ???<meta?charset="utf-8"> ???<title></title> ???<meta?name="viewport"?content="width=device-width,initial-scale=1"> ???<script?type="text/javascript"> ??????window.onload=function()?{ ?????????var?navbar?=?document.getElementById('navbar'); ?????????var?navbarLi?=?navbar.getElementsByTagName('li'); ?????????var?content?=?document.getElementById('content'); ?????????var?contentDiv?=?content.getElementsByTagName("div"); ?????????for(var?i=0;i<navbarLi.length;i++){ ????????????navbarLi[i].i=i; ????????????navbarLi[i].onclick=function(){ ???????????????scroll(contentDiv[this.i]); ????????????} ?????????} ?????????function?scroll(obj){ ????????????var?timer=null; ????????????clearInterval(timer); ????????????timer=setInterval(function(){ ???????????????if(document.body.scrollTop<obj.offsetTop-380){ ??????????????????document.body.scrollTop+=10; ???????????????} ???????????????if(document.body.scrollTop>obj.offsetTop-380){ ??????????????????document.body.scrollTop-=10; ???????????????} ????????????},1); ?????????} ??????}; ???</script> ???<style?type="text/css"> ???*{ ??????margin:?0; ??????padding:?0; ???} ???header{ ??????width:?100%; ??????height:?300px; ??????position:?fixed; ??????top:?0; ???} ???header?div{ ??????width:?100%; ??????height:?300px; ??????background-color:?pink; ??????margin:?0?auto; ???} ???nav{ ??????width:?100%; ??????height:?50px; ??????position:?fixed; ??????top:?300px; ???} ???ul{ ??????width:?100%; ??????height:?50px; ??????background-color:?gray; ??????margin:?0?auto; ??????list-style:?none; ???} ???ul?li{ ??????width:?23%; ??????height:?50px; ??????float:?left; ??????text-align:?center; ??????line-height:?50px; ??????margin:?0?1%?0; ??????background-color:?black; ??????color:?white; ???} ???ul?li:hover{ ??????cursor:?pointer; ???} ???#content{ ??????width:?100%; ??????margin:?380px?auto?0; ???} ???#content?div{ ??????width:?100%; ??????height:?500px; ??????background-color:?pink; ??????margin-bottom:?30px;?????? ???} </style> </head> <body> ???<header> ??????<div> ??????</div> ???</header> ???<nav> ??????<ul?id="navbar"> ?????????<li>111111111111</li> ?????????<li>222222222222</li> ?????????<li>333333333333</li> ?????????<li>444444444444</li> ??????</ul> ???</nav> ???<div?id="content"> ??????<div>1111111111111111</div> ??????<div>2222222222222222</div> ??????<div>3333333333333333</div> ??????<div>4444444444444444</div> ???</div> </body> </html>

查看完整描述

2 回答

已采納

剛毅87

TA貢獻(xiàn)345條經(jīng)驗(yàn) 獲得超309個(gè)贊

將 timer 的定義寫在函數(shù)外面,代碼如下

<!DOCTYPE?html>
<html>
<head>
???<meta?charset="utf-8">
???<title></title>
???<meta?name="viewport"?content="width=device-width,initial-scale=1">
???<script?type="text/javascript">
??????window.onload=function()?{
?????????var?navbar?=?document.getElementById('navbar');
?????????var?navbarLi?=?navbar.getElementsByTagName('li');
?????????var?content?=?document.getElementById('content');
?????????var?contentDiv?=?content.getElementsByTagName("div");
?????????for(var?i=0;i<navbarLi.length;i++){
????????????navbarLi[i].i=i;
????????????navbarLi[i].onclick=function(){
???????????????scroll(contentDiv[this.i]);
????????????}
?????????}
?????????//將?timer?的定義放在函數(shù)外面
?????????var?timer=null;
?????????function?scroll(obj){
????????????
????????????clearInterval(timer);
????????????timer=setInterval(function(){
???????????????if(document.body.scrollTop<obj.offsetTop-380){
??????????????????document.body.scrollTop+=10;
???????????????}
???????????????if(document.body.scrollTop>obj.offsetTop-380){
??????????????????document.body.scrollTop-=10;
???????????????}
????????????},1);
?????????}
??????};
???</script>
???<style?type="text/css">
???*{
??????margin:?0;
??????padding:?0;
???}
???header{
??????width:?100%;
??????height:?300px;
??????position:?fixed;
??????top:?0;
???}
???header?div{
??????width:?100%;
??????height:?300px;
??????background-color:?pink;
??????margin:?0?auto;
???}
???nav{
??????width:?100%;
??????height:?50px;
??????position:?fixed;
??????top:?300px;
???}
???ul{
??????width:?100%;
??????height:?50px;
??????background-color:?gray;
??????margin:?0?auto;
??????list-style:?none;
???}
???ul?li{
??????width:?23%;
??????height:?50px;
??????float:?left;
??????text-align:?center;
??????line-height:?50px;
??????margin:?0?1%?0;
??????background-color:?black;
??????color:?white;
???}
???ul?li:hover{
??????cursor:?pointer;
???}
???#content{
??????width:?100%;
??????margin:?380px?auto?0;
???}
???#content?div{
??????width:?100%;
??????height:?500px;
??????background-color:?pink;
??????margin-bottom:?30px;??????
???}
</style>
</head>
<body>
???<header>
??????<div>
??????</div>
???</header>
???<nav>
??????<ul?id="navbar">
?????????<li>111111111111</li>
?????????<li>222222222222</li>
?????????<li>333333333333</li>
?????????<li>444444444444</li>
??????</ul>
???</nav>
???<div?id="content">
??????<div>1111111111111111</div>
??????<div>2222222222222222</div>
??????<div>3333333333333333</div>
??????<div>4444444444444444</div>
???</div>
</body>
</html>

1 反對回復(fù) 2016-06-20

qq_sU_4
謝謝回答

回復(fù) 2016-06-21

鬧小志

TA貢獻(xiàn)75條經(jīng)驗(yàn) 獲得超42個(gè)贊

問題來源：定時(shí)器

首先需要了解定時(shí)器的工作原理：我們通過setInterval函數(shù)每隔1毫秒執(zhí)行一次里面的操作，當(dāng)里面的這個(gè)操作滿足什么樣的條件的時(shí)候我們需要它停止（即清除定時(shí)器）

程序的問題：

1、不管你是定義的全局的timer還是局部的timer變量都是可以的

2、clearInterval在這里是沒有意義的，你定義的是局部變量，每次click都會(huì)把timer初始化成null，null后面緊接著就是clearInterval，你把一個(gè)null給清除掉是沒有意義的。也就是說這里并沒有一個(gè)條件，達(dá)到這個(gè)條件的時(shí)候你才需要清除定時(shí)器（使用clearInterval）。

3、因?yàn)槎〞r(shí)器清除沒有起到作用，所以timer會(huì)一直執(zhí)行，這個(gè)你可以在控制臺(tái)打印驗(yàn)證一下，即使正確定位到相應(yīng)的div，可是定時(shí)器仍然每1毫秒就執(zhí)行一次

解決辦法：

找到這個(gè)讓定時(shí)器停止的條件。根據(jù)程序我猜測應(yīng)該是點(diǎn)擊li的時(shí)候，滾動(dòng)到相應(yīng)的div，完成這個(gè)動(dòng)作之后就清除掉定時(shí)器。那就要思考什么時(shí)候才是滾凍到了相應(yīng)的div，即當(dāng) document.body.scrollTop == obj.offsetTop-380 的時(shí)候，我們可以確定滾凍到了相應(yīng)的div。

總結(jié)以上，我修改了一下scroll函數(shù)：

function?scroll(obj){
?????????var?timer=null;
????????????timer=setInterval(function(){
????????????console.log("body:"+document.body.scrollTop);
????????????console.log("top:"+(obj.offsetTop-380));
???????????????if(document.body.scrollTop<obj.offsetTop-380){
??????????????????document.body.scrollTop+=10;
???????????????}else?if(document.body.scrollTop>obj.offsetTop-380){
??????????????????document.body.scrollTop-=10;
???????????????}else{
?????????????????clearInterval(timer);
???????????????}
????????????},1);
?????????}

個(gè)人理解，醬紫~

2 反對回復(fù) 2016-06-20