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