關(guān)于mousemove和scroll事件的一點(diǎn)技巧

當(dāng)我們?yōu)槟吃亟壎╩ousemove事件或者scroll后，一旦鼠標(biāo)移動(dòng)或滾動(dòng)條滾動(dòng)就會(huì)觸發(fā)大量的事件，就像這樣。 移動(dòng)鼠標(biāo)橫穿過紅色框。 將滾動(dòng)條從頂部滾動(dòng)到底部。 如果是實(shí)現(xiàn)拖動(dòng)效果，當(dāng)然我們需要時(shí)時(shí)捕獲事件的位置，這種效果是必須的，但如果是其它情況呢

　　當(dāng)我們?yōu)槟吃亟壎╩ousemove事件或者scroll后，一旦鼠標(biāo)移動(dòng)或滾動(dòng)條滾動(dòng)就會(huì)觸發(fā)大量的事件，就像這樣。

移動(dòng)鼠標(biāo)橫穿過紅色框。

將滾動(dòng)條從頂部滾動(dòng)到底部。

如果是實(shí)現(xiàn)拖動(dòng)效果，當(dāng)然我們需要時(shí)時(shí)捕獲事件的位置，這種效果是必須的，但如果是其它情況呢？我們只是希望在用戶操作大概結(jié)束后來調(diào)用事件處理函數(shù)，顯然這種情況

是不符合得。

　　那怎么辦呢？這里可使用一個(gè)定時(shí)器來解決這個(gè)問題（直接上代碼）。

上面的是最開始的情況，為div綁定scroll事件，在事件處理程序中未做任何處理。

下面的則是使用了定時(shí)器，在每次事件處理程序調(diào)用時(shí)，timer&&clearTimeout(timer)都會(huì)將上次的事件操作清除，然后設(shè)置新的定時(shí)器。當(dāng)兩個(gè)事件間隔大于50毫秒時(shí)，因?yàn)闆]有清楚，所以事件才會(huì)發(fā)生（時(shí)間間隔根據(jù)自己的需要設(shè)置）。改進(jìn)后的結(jié)果如下：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com