javascript函式節流

2021-08-20 05:05:00 字數 1377 閱讀 8202

應用場景

實時輸入檢測:如根據使用者輸入文本來實時查詢資料(判斷註冊使用者名稱是否重複),郵箱格式檢驗

頁面滾動操作onscroll事件

頁面視窗大小改變onresize事件

滑鼠移入移出事件onmouseover,onmouseout

對於以上高頻率的執行操作來說如果不進行節流控制的話,一旦請求頻繁會造成頁面很卡甚至宕機,函式節流可以大大的減少網頁請求從而提高效能

頁面滾動事件不節流的效果:一次滾動執行了12次

也賣弄滾動事件節流效果:只執行了1次

**展示

html>

<htmllang=

"en">

<head>

<metacharset=

"utf-8">

<metaname=

"viewport"content=

"width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>

<title>title

title>

<style>

* body

style>

head>

<body>

body>

<script>

window.onscroll

= function () ;

//定義節流函式

function

throttle(fn

,delay

),delay

); }

//定義列印函式

function

consolefun()

script>

html>

JavaScript 函式節流

個人理解 瀏覽器某個事件觸發的平率非常高 例如onscroll事件 如果每次都去執行處理事件的邏輯,消耗大量的cpu資源導致瀏覽器卡死,因此需要在一段時間內只執行最後一次函式的函式叫做函式節流。n 0 function resizehandler function throttle method,c...

Javascript效能優化之 函式節流技術

函式節流技術的主要思路是,通過乙個定時器,阻斷連續重複的函式呼叫。對於我們自己內部使用的函式,這通常意義不大,也不推薦使用這個技術,它可能會丟失對某些資料的處理。但是對於在使用者介面呼叫的函式,卻非常有意義。例如乙個 mousemove 或者ie 中resize 事件的監聽函式。這類事件監聽函式往往...

函式節流總結

函式節流 在呼叫window.onresize事件時,如果操作頻繁操作dom極為耗效能,因此在這種情況下可以通過定時器對該函式進行節流。函式節流背後的基本思想是 某些 不可以在沒有間斷的情況連續重複執行。第一次呼叫函式,建立乙個定時器,在指定的間隔之後執行 第二次呼叫函式,它會清除前一次的定時器並設...