首頁 > web前端 > js教程 > 主體

javascript阻止scroll事件多次執行的思路及實作_javascript技巧

WBOY
發布: 2016-05-16 17:16:46
原創
1071 人瀏覽過

寫這篇主要是為了解決一些常見網頁特效在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{ } }
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板