老生常談Javascript的防抖和節(jié)流
1. 什么是防抖
【解釋】: 防抖策略(debounce)是當事件被觸發(fā)后,延遲 n 秒后再執(zhí)行回調,如果在這 n 秒內事件又被觸發(fā),則重新計時。
【圖解】:
【作用】:
當用戶頻繁觸發(fā)該事件的時候,確保只進行最后一次的請求操作,節(jié)約請求的資源
【實現輸入框的防抖】:
var timer = null // 1. 防抖動的 timer function debounceSearch(keywords) { // 2. 定義防抖的函數 timer = setTimeout(function() { // 發(fā)起 JSONP 請求 getSuggestList(keywords) }, 500) } $('#ipt').on('keyup', function() { // 3. 在觸發(fā) keyup 事件時,立即清空 timer clearTimeout(timer) // ...省略其他代碼 debounceSearch(keywords) })
【實現建議框緩存】:
定義全局緩存對象
// 緩存對象 var cacheObj = {}
將搜索結果保存到緩存對象中
// 渲染建議列表 function renderSuggestList(res) { // ...省略其他代碼 // 將搜索的結果,添加到緩存對象中 var k = $('#ipt').val().trim() cacheObj[k] = res }
優(yōu)先從緩存中獲取搜索建議
// 監(jiān)聽文本框的 keyup 事件 $('#ipt').on('keyup', function() { // ...省略其他代碼 // 優(yōu)先從緩存中獲取搜索建議 if (cacheObj[keywords]) { return renderSuggestList(cacheObj[keywords]) } // 獲取搜索建議列表 debounceSearch(keywords) })
2、什么是節(jié)流
【解釋】: 減少一段時間內事件的觸發(fā)頻率。也叫節(jié)流策略。
【圖解】:
【應用】
- 鼠標連續(xù)不斷地觸發(fā)某事件(如點擊),只在單位時間內只觸發(fā)一次;
- 懶加載時要監(jiān)聽計算滾動條的位置,但不必每次滑動都觸發(fā),可以降低計算的頻率,而不必去浪費 CPU 資源;
【鼠標跟隨案例】:
<!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') // 綁定鼠標移動事件 $(document).on('mousemove', function (e) { // 獲取鼠標到x和y軸的距離設置給圖片的高和左 $(angel).css('top', e.pageY-40 + 'px').css('left', e.pageX-40 + 'px') }) }) </script> </body> </html>
3、節(jié)流閥
【解釋】:
- 節(jié)流閥為空,表示可以執(zhí)行下次操作;不為空,表示不能執(zhí)行下次操作。
- 當前操作執(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 () { // 定義一個節(jié)流閥 var timer = null; // 獲取圖片元素 var angel = $('#angel') // 綁定鼠標移動事件 $(document).on('mousemove', function (e) { // 判斷節(jié)流閥是否為空 if (timer) return // 控制節(jié)流閥的時間 timer = setTimeout(function () { // 獲取鼠標到x和y軸的距離設置給圖片的高和左 $(angel).css('top', e.pageY - 40 + 'px').css('left', e.pageX - 40 + 'px') // 清空節(jié)流閥 timer = null }, 100) }) }) </script> </body> </html>
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!
相關文章
javascript 學習筆記(八)javascript對象
昨天看了些有關javascript對象方面的文章,以下是自己的一些學習心得及體會,希望同大家共同討論!2011-04-04javascript類型系統(tǒng)——undefined和null全面了解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)——undefined和null全面了解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07