寫這篇主要是為了解決一些常見網頁特效在js解析時預期與效果不同。
原始碼:
程式碼如下:
程式碼如下:
程式碼如下:
程式碼如下: 程式碼如下:window.onscroll = function(){ alert("haha");
}
裝在script標籤內滑鼠滑動之後一直惦記滑鼠提示框才可以,所以很不方便,
而且目的是滑鼠滑動後只執行一次事件,這個效果顯然和實際不符合吧。
//程式碼改進--增加延時器。
既然scroll事件是一個連續觸發事件,那我設定一個延遲器,在使用者滑動滑鼠的時間後執行該函數 ,書不是就可以只執行一次啦 。
複製程式碼
程式碼如下: //測試程式碼: function haha(aha) { alert("haha");
}
window.onscroll = function(){
setTimeout(haha,500);
}
結果發現該死的還是跟上面一樣要彈出很多的警告框--可見scroll事件像隊列一樣排成一行,按順序執行,所以此路不通,另想辦法啊。
透過條件控制事件執行,這是一個不錯的方法
複製程式碼
程式碼如下:
程式碼如下: function haha(){ alert("haha");
}
var tur = true; //建立條件
window.onscroll = function(){
if(tur){ setTimeout(haha,500); tur = false; }
else
{}
}
慶幸的是,老鼠滾動執行一次程式碼,問題是當再次滾動滑鼠之後,事件再也不執行了。
原因就是條件被設定為false 所以後續的事件永遠不執行了。 思路就是 條件判斷 延遲執行 就可以解決這個問題。在事件執行之初,復活變量,事件執行完畢後 殺死變數。 複製程式碼 程式碼如下: var tur = true function haha(ahaa) {alert("haha"); tur = true; } window.onscroll = function(){ if(tur){ setTimeout(haha,1000); tur = false; } else{ } }