老生常談Javascript的防抖和節(jié)流
1. 什么是防抖
【解釋】: 防抖策略(debounce)是當(dāng)事件被觸發(fā)后,延遲 n 秒后再執(zhí)行回調(diào),如果在這 n 秒內(nèi)事件又被觸發(fā),則重新計(jì)時(shí)。
【圖解】:
【作用】:
當(dāng)用戶頻繁觸發(fā)該事件的時(shí)候,確保只進(jìn)行最后一次的請(qǐng)求操作,節(jié)約請(qǐng)求的資源
【實(shí)現(xiàn)輸入框的防抖】:
var timer = null // 1. 防抖動(dòng)的 timer function debounceSearch(keywords) { // 2. 定義防抖的函數(shù) timer = setTimeout(function() { // 發(fā)起 JSONP 請(qǐng)求 getSuggestList(keywords) }, 500) } $('#ipt').on('keyup', function() { // 3. 在觸發(fā) keyup 事件時(shí),立即清空 timer clearTimeout(timer) // ...省略其他代碼 debounceSearch(keywords) })
【實(shí)現(xiàn)建議框緩存】:
定義全局緩存對(duì)象
// 緩存對(duì)象 var cacheObj = {}
將搜索結(jié)果保存到緩存對(duì)象中
// 渲染建議列表 function renderSuggestList(res) { // ...省略其他代碼 // 將搜索的結(jié)果,添加到緩存對(duì)象中 var k = $('#ipt').val().trim() cacheObj[k] = res }
優(yōu)先從緩存中獲取搜索建議
// 監(jiān)聽(tīng)文本框的 keyup 事件 $('#ipt').on('keyup', function() { // ...省略其他代碼 // 優(yōu)先從緩存中獲取搜索建議 if (cacheObj[keywords]) { return renderSuggestList(cacheObj[keywords]) } // 獲取搜索建議列表 debounceSearch(keywords) })
2、什么是節(jié)流
【解釋】: 減少一段時(shí)間內(nèi)事件的觸發(fā)頻率。也叫節(jié)流策略。
【圖解】:
【應(yīng)用】
- 鼠標(biāo)連續(xù)不斷地觸發(fā)某事件(如點(diǎn)擊),只在單位時(shí)間內(nèi)只觸發(fā)一次;
- 懶加載時(shí)要監(jiān)聽(tīng)計(jì)算滾動(dòng)條的位置,但不必每次滑動(dòng)都觸發(fā),可以降低計(jì)算的頻率,而不必去浪費(fèi) CPU 資源;
【鼠標(biāo)跟隨案例】:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/jquery.js"></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; } #angel { position: absolute; } </style> </head> <body> <img src="./angel.gif" alt="" id="angel" /> <script> $(function () { // 獲取圖片元素 var angel = $('#angel') // 綁定鼠標(biāo)移動(dòng)事件 $(document).on('mousemove', function (e) { // 獲取鼠標(biāo)到x和y軸的距離設(shè)置給圖片的高和左 $(angel).css('top', e.pageY-40 + 'px').css('left', e.pageX-40 + 'px') }) }) </script> </body> </html>
3、節(jié)流閥
【解釋】:
- 節(jié)流閥為空,表示可以執(zhí)行下次操作;不為空,表示不能執(zhí)行下次操作。
- 當(dāng)前操作執(zhí)行完,必須將節(jié)流閥重置為空,表示可以執(zhí)行下次操作了。
- 每次執(zhí)行操作前,必須先判斷節(jié)流閥是否為空。
【使用節(jié)流優(yōu)化】:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/jquery.js"></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; } #angel { position: absolute; } </style> </head> <body> <img src="./angel.gif" alt="" id="angel" /> <script> $(function () { // 定義一個(gè)節(jié)流閥 var timer = null; // 獲取圖片元素 var angel = $('#angel') // 綁定鼠標(biāo)移動(dòng)事件 $(document).on('mousemove', function (e) { // 判斷節(jié)流閥是否為空 if (timer) return // 控制節(jié)流閥的時(shí)間 timer = setTimeout(function () { // 獲取鼠標(biāo)到x和y軸的距離設(shè)置給圖片的高和左 $(angel).css('top', e.pageY - 40 + 'px').css('left', e.pageX - 40 + 'px') // 清空節(jié)流閥 timer = null }, 100) }) }) </script> </body> </html>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript 學(xué)習(xí)筆記(八)javascript對(duì)象
昨天看了些有關(guān)javascript對(duì)象方面的文章,以下是自己的一些學(xué)習(xí)心得及體會(huì),希望同大家共同討論!2011-04-04javascript學(xué)習(xí)筆記(六)數(shù)據(jù)類(lèi)型和JSON格式
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,我們稱(chēng)之為JavaScript對(duì)象表示法。使用JSON進(jìn)行數(shù)據(jù)傳輸?shù)膬?yōu)勢(shì)之一是JSON實(shí)際上就是JavaScript。它基于ECMAScript第3版中JavaScript對(duì)象字面量語(yǔ)法子集的一種文本格式。2014-10-10javascript類(lèi)型系統(tǒng)——undefined和null全面了解
下面小編就為大家?guī)?lái)一篇javascript類(lèi)型系統(tǒng)——undefined和null全面了解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07JS中創(chuàng)建函數(shù)的三種方式及區(qū)別
這篇文章主要介紹了js函數(shù)的多種定義方法與其區(qū)別,非常的詳細(xì),有需要的小伙伴可以參考下2016-03-03關(guān)于JavaScript中string 的replace
在使用JavaScript對(duì)字符串進(jìn)行處理的時(shí)候我們經(jīng)常會(huì)用到replace方法,很簡(jiǎn)單的一個(gè)方法,以前一直不以為意,直到今天看JavaScript語(yǔ)言精粹的時(shí)候讀到了一個(gè)有趣的小例子的時(shí)候,并不是十分理解,了解了一下replace的用法才明白,原來(lái)replace不像想象中的那么簡(jiǎn)單2013-04-04js之WEB開(kāi)發(fā)調(diào)試?yán)?Firebug 下載
js之WEB開(kāi)發(fā)調(diào)試?yán)?Firebug 下載...2007-01-01