簡單說 JavaScript實(shí)現(xiàn)雪花飄落效果

ShowerSun 發(fā)布于2019-08-21 17:51 / 2417人閱讀

摘要：說明這次實(shí)現(xiàn)的雪花飄落的效果很簡單，主要是為了練習(xí)練習(xí)中的定時器，和。簡單說，意思就是用了這個定時器，能把兩次修改樣式的代碼分開執(zhí)行，可以先把第一次修改的樣式渲染后，在進(jìn)行第二次的修改，雪花就會動了。

說明

這次實(shí)現(xiàn)的雪花飄落的效果很簡單，主要是為了練習(xí)練習(xí)JavaScript中的定時器，setTimeout 和 setInterval。

效果圖

解釋

setTimeout()
setTimeout函數(shù)用來指定某個函數(shù)或某段代碼，在多少毫秒之后執(zhí)行。它返回一個整數(shù)，表示定時器的編號，以后可以用來取消這個定時器。

var timerId = setTimeout(func|code, delay)

上面代碼中，setTimeout函數(shù)接受兩個參數(shù)，第一個參數(shù)func|code是將要推遲執(zhí)行的函數(shù)名或者一段代碼，第二個參數(shù)delay是推遲執(zhí)行的毫秒數(shù)。

setInterval()
setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個任務(wù)每隔一段時間就執(zhí)行一次，也就是無限次的定時執(zhí)行。

clearTimeout()，clearInterval()
setTimeout和setInterval函數(shù)，都返回一個表示計(jì)數(shù)器編號的整數(shù)值，將該整數(shù)傳入clearTimeout和clearInterval函數(shù)，就可以取消對應(yīng)的定時器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

注意：

setTimeout 和 setInterval 必須要等到當(dāng)前腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件，全部處理完以后，才會執(zhí)行setTimeout指定的任務(wù)。

這里就不細(xì)說 setTimeout 和 setInterval的概念了，
想詳細(xì)了解的請看這里，定時器

我們繼續(xù)說實(shí)現(xiàn)雪花飄落的效果
主要是以下4步：
1、定義一片雪花模板；
2、設(shè)置第一個定時器，周期性定時器，每隔一段時間生成一片雪花；
3、設(shè)置第二個定時器，一次性定時器，當(dāng)?shù)谝粋€定時器生成雪花，并在頁面上渲染出來后，修改雪花的樣式，讓雪花動起來；
4、設(shè)置第三個定時器，當(dāng)雪花落下后，刪除雪花。

上面是實(shí)現(xiàn)的思路，下面寫出具體的代碼，下面的代碼是JS原生代碼，最后會附上JQuery實(shí)現(xiàn)的代碼，思路都一樣。

注意：
因?yàn)槎〞r器添加的事件，會在下一次Event Loop執(zhí)行，所以第二個定時器的作用是為了讓生成的雪花先拼接到頁面中渲染出來后，再修改他的樣式，這樣才能讓他動起來，如果沒有這個定時器，瀏覽器會把所有的JS代碼都執(zhí)行完之后才渲染頁面，這樣的話后面的樣式就直接覆蓋前面的樣式了，雪花就沒法動了，這和瀏覽器的線程有關(guān)系。

簡單說，意思就是用了這個定時器，能把兩次修改樣式的代碼分開執(zhí)行，可以先把第一次修改的樣式渲染后，在進(jìn)行第二次的修改，雪花就會動了。

如果想了解更詳細(xì)的東西推薦看看下面的文章
js setTimeOut()
原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的
哪些地方會出現(xiàn)css阻塞，哪些地方會出現(xiàn)js阻塞？
瀏覽器~加載，解析，渲染

總結(jié)

這次實(shí)現(xiàn)的雪花飄落效果，要說麻煩的地方，就是第二個定時器那里了，為什么用了這個定時器就能讓雪花動起來，文中只是簡單的說了一下，更加詳細(xì)的還是看看推薦的那幾篇文章吧！不過在這之前，要先弄明白定時器是怎么回事才可以。
不明白定時器看這里，定時器
不明白為什么用第二個定時器看這幾篇文章
js setTimeOut()
原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的
哪些地方會出現(xiàn)css阻塞，哪些地方會出現(xiàn)js阻塞？
瀏覽器~加載，解析，渲染

JQuery版