前端_网页编程 节流
文章目錄
- 前言
- 1、什么是節(jié)流
- 2、節(jié)流的應(yīng)用場景
- 3 節(jié)流案例 - 鼠標跟隨效果
- 3.1 渲染UI結(jié)構(gòu)并美化樣式
- 3.2 不使用節(jié)流實現(xiàn)鼠標跟隨效果
- 3.3 節(jié)流閥的概念
- 3.4 使用節(jié)流閥實現(xiàn)鼠標跟隨效果
- 附：完整代碼
- 總結(jié)
前言
我們在做頁面事件綁定的時候，經(jīng)常要進行節(jié)流處理，比如鼠標異步點擊，去執(zhí)行一個異步請求時，需要讓它在上一次沒執(zhí)行時不能再點擊，又或者綁定滾動事件，這種持續(xù)觸發(fā)進行DOM判斷的時候，就要按一定頻率的執(zhí)行。
本文是關(guān)于js防抖和節(jié)流的相關(guān)內(nèi)容，記錄下來供學(xué)習(xí)和查閱
1、什么是節(jié)流
節(jié)流策略（throttle），顧名思義，可以減少一段時間內(nèi)事件的觸發(fā)頻率。
通俗地講，就是規(guī)定一個單位時間，在這個單位時間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個單位時間內(nèi)某事件被觸發(fā)多次，只有一次能生效。
節(jié)流原理圖
2、節(jié)流的應(yīng)用場景
- 鼠標連續(xù)不斷地觸發(fā)某事件（如點擊），單位時間內(nèi)只觸發(fā)一次；
- 懶加載時要監(jiān)聽計算滾動條的位置，但不必每次滑動都觸發(fā)，可以降低計算的頻率，而不必去浪費 CPU 資源；；
- 監(jiān)聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷；
3 節(jié)流案例 - 鼠標跟隨效果
3.1 渲染UI結(jié)構(gòu)并美化樣式
圖片素材：
將圖片素材和html文件放到同一個文件夾下（如果不是，請修改img的src屬性）。
HTML結(jié)構(gòu)和CSS樣式：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠標跟隨效果</title><style>html,body {margin: 0;padding: 0;overflow: hidden;}#angel {position: absolute;}</style> </head><body><img src="./angel.gif" alt="" id="angel"> </body></html>3.2 不使用節(jié)流實現(xiàn)鼠標跟隨效果
代碼如下：
<script>$(function() { // 1、獲取圖片元素 var angel = $('#angel') // 2、監(jiān)聽文檔的 mousemove 事件$(document).on('mousemove', function(e) {// 3、給圖片設(shè)置位置 $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px') })}) </script>3.3 節(jié)流閥的概念
生活中的節(jié)流閥：
高鐵衛(wèi)生間是否被占用，由紅綠燈控制，紅燈表示被占用，綠燈表示可使用。這個紅綠燈，就可以視為節(jié)流閥
假設(shè)每個人上衛(wèi)生間都需要花費5分鐘，則五分鐘之內(nèi)，被占用的衛(wèi)生間無法被其他人使用。
上一個人使用完畢后，需要將紅燈 重置 為綠燈，表示下一個人可以使用衛(wèi)生間。
下一個人在上衛(wèi)生間之前，需要先判斷控制燈是否為綠色，來知曉能否上衛(wèi)生間。
節(jié)流閥為空，表示可以執(zhí)行下次操作；不為空，表示不能執(zhí)行下次操作。
當(dāng)前操作執(zhí)行完，必須將節(jié)流閥 重置 為空，表示可以執(zhí)行下次操作了。
每次執(zhí)行操作前，必須先判斷節(jié)流閥是否為空。
3.4 使用節(jié)流閥實現(xiàn)鼠標跟隨效果
實現(xiàn)思路：
實現(xiàn)代碼：
<script>$(function() { // 1、獲取圖片元素 var angel = $('#angel') // 定義節(jié)流閥var timer = null;// 2、監(jiān)聽文檔的 mousemove 事件$(document).on('mousemove', function(e) {// 判斷節(jié)流閥是否為空，如果為空，表示距離上次執(zhí)行不足16秒，直接return出去if (timer) {return}timer = setTimeout(function() {// 3、給圖片設(shè)置位置 $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')// 每次執(zhí)行完清空延時器timer = null;}, 16) })}) </script>附：完整代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠標跟隨效果</title><script src="./lib/jquery.js"></script><style>html,body {margin: 0;padding: 0;overflow: hidden;}#angel {position: absolute;}</style> </head><body><img src="./images/angel.gif" alt="" id="angel"><script>$(function() { // 1、獲取圖片元素 var angel = $('#angel') // 定義節(jié)流閥var timer = null;// 2、監(jiān)聽文檔的 mousemove 事件$(document).on('mousemove', function(e) {// 判斷節(jié)流閥是否為空，如果為空，表示距離上次執(zhí)行不足16秒，直接return出去if (timer) {return}timer = setTimeout(function() {// 3、給圖片設(shè)置位置 $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')// 每次執(zhí)行完清空延時器timer = null;}, 16) })})</script> </body></html>完整案例源碼 / 素材文件：https://pan.baidu.com/s/1_rGjiuwQTPhGK2njbo9vsw
提取碼：mxwt
總結(jié)
防抖和節(jié)流的區(qū)別：
防抖： 如果事件被頻繁觸發(fā)，防抖能保證 只有最有一次觸發(fā)生效！前面 N 多次的觸發(fā)都會被忽略！
節(jié)流： 如果事件被頻繁觸發(fā)，節(jié)流能夠 減少事件觸發(fā)的頻率，因此，節(jié)流是 有選擇性地 執(zhí)行一部分事件！。
總結(jié)
以上是生活随笔為你收集整理的前端_网页编程 节流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用apache POI把list集合里
- 下一篇： 一键快速生成 Vue 的 HTML页面结