JavaScript 函數節流

最後更新：2018-05-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：nbsp post ati method eof 執行視窗 callee ble

其實最早看設計模式是單純的瞭解js語言本身;所以看了理解了之後還是容易忘記;可能之後實際的工作需要才能記住吧;

看下面:<!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></head><body>    </body></html><script>    window.onresize=function(){        con();    };    function con(){        console.log("aaaaa")    }</script>

上述情況,瀏覽器大概每秒會檢查到10次左右的視窗變化;顯然對效能不利;

下面看一個節流函數做的處理:

<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></head><body>    </body></html><script>

window.onresize=function(){    throttle(con,300);};function con(){    console.log("aaaaa")}
//節流器函數;function throttle() {　　　var first_param = arguments[0], methods,time_param;　　　if (typeof first_param === ‘boolean‘) {　　　　　　　methods = arguments[1];　　　　methods.throttleTimeId && clearTimeout(methods.throttleTimeId);　　　　} else {　　　　　　　　methods = first_param;　　　　　　　　arguments.callee(true, methods); //arguments.callee指向函數的引用; //無閉包,立即銷毀記憶體;　　　　time_param = arguments[1]||500//預設500毫秒; //函數的argument指向的是 實參;　　　　// window.throttle(true, methods); //arguments.callee指向函數的引用;　　　　//為函數綁定計時器，順延強制　　　　methods.throttleTimeId = setTimeout(function () {　　　　　　methods();　　　　},time_param)　　}}</script>

通過把要執行的函數傳入到節流函數中,達到效果;

當使用者重複快速拖動視窗的時候,在設定的時間內 time_param;防抖函數檢測有true時,馬上就清楚了函數的執行,除非使用者在規定時間不再操作;

這個用在ajax重複提交按鈕上面也是一樣的;

簡單假設:

$("#btns").on("click",function(){

 throttle(query,300);

})

function query(){

　　$.ajax({

　　　　url:"api/user",

　　　　method:"post",

　　data:{

　　　　　　"name":"liuliu"

　　success:function(res){

　　　　　　console.log(res)

　　　　}

　　})

}

JavaScript 函數節流

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript 函數節流

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support