? ? 函數是Js中一等公民，其重要性不言而喻，現在我就把常用方法總結一下，希望大家能夠用到

? 函數中的緩存

函數中的緩存起到很重要的作用，不僅僅提升性能，還能夠提升速度。對于一個函數來說特別重要，之前我做的一個項目，由于渲染的數據較多，當渲染數據達到200條的時候瀏覽器已經很卡頓了。我打開控制臺追溯源碼，發現發送請求兩次，new 每一個實例。第一步是把多余的請求注釋，第二步，把每一次實例分解，大致分三種數據，我就定義三個變量來存儲這三種類型數據。更改完代碼之后，直接渲染1000條數據不卡頓。瞬間覺得函數中的緩存還是相當重要 的。看一些這個代碼你就知道了

/*** 函數緩存* @fn {Function} 回掉函數** */ var getSingle=function(fn){var result;return function(){return result || (result=fn.apply(this,arguments));} }var div=getSingle(function(){var dom_div=document.createElement("div");dom_div.innerHTML="我是彈出層";document.body.appendChild(dom_div);return dom_div; }); div();//第一次調用返回新創建的div div();//第二次調用返回緩存中的div

這個緩存方式是利用到閉包的特性，返回一個新的函數，這個函數中帶有getSingle函數中局部的變量?result引用。所有result會一直存在內存中。當我們第一次調用div()函數result值被賦值。第二次調用直接從內存中讀取result

函數鏈式調用

鏈式調用其實也很常用，如果你曾經已經把jQuery完爛，你對它的鏈式調用是否好奇。其實鏈式調用也是很簡單的。咱們看一個例子

/*** 函數鏈式調用* @elm 單個DOM節點* */ var GetElm=function(elm){this.elm=elm || document.querySelector("body"); } GetElm.prototype.setWidth=function(width){this.elm.style.width=width+"px";return this; } GetElm.prototype.setHeight=function(height){this.elm.style.height=height+"px";return this; } var dom= new GetElm(document.querySelector(".imag")); dom.setHeight(400).setWidth(200);

首先定義了一個簡單的構造函數GetElm，然后在其原型擴展setWidth與setHeight方法。當我們實例一個GetElm以后。我們就可以使用setWidth與setHeight方法，大家已經發現setHeight與setWidth方法返回了this.這才是咱們實現鏈式調用的關鍵所在。

函數節流

函數節流對于我們來說太實用啦，因為我們開發頁面的時候經常會用到onresize，onscroll，onmousemove，如果這些事件中加雜大量的dom操作，瀏覽器肯定會卡頓。

//函數節流 /*** 函數節流* @fn {Function} 延遲執行函數* @interval {Number} 延遲多久執行,默認值500毫秒* * */ var throttle=function(fn,interval){var _fn=fn || function(){},//保存需要延遲執行函數的引用timer,//定時器firstTime=true;//是否是第一次調用return function(){var args=arguments,that=this;if(firstTime){//如果第一次執行不需要延遲 _fn.apply(that,args);return firstTime=false;}if(timer){//如果定時器還在說明上一次執行還沒結束return false;}timer=setTimeout(function(){//延遲一段時間執行 clearTimeout(timer);timer=null;_fn.apply(that,args);},interval || 500);} }window.onresize=throttle(function(){console.log("200"); },200)

有了函數throttle節流方法媽媽再也不用擔心我的瀏覽器會卡頓啦！這個節流函數也是用閉包實現的哦！！！小伙伴們，下一篇內容咱就給你單獨講講閉包。

另一種簡單的延遲執行函數

/*** 節流函數* 只執行一次* @fn {Function} 回掉函數* @time {Number} 毫秒值* @context {Object} 作用域* */ function throttle1(fn, time,context){clearTimeout(fn.timers);fn.timers=setTimeout(function(){fn.call(context);},time || 500); }function createHtml(){var dom=document.createElement('div');dom.innerHTML="小小坤";document.body.appendChild(dom); } window.onresize=function(){throttle1(createHtml); }

這個函數是用于搶購時候的，假設你一直點擊請求數據，就會造成瀏覽器卡頓。

/*** 節流函數：每500毫秒可記錄一次* @fn {Function} 回掉函數* @time {Number} 毫秒值* */ function throttle(fn, time){var timer=null;return function(){var args = [].slice.call(arguments);//獲取所有參數，轉換為數組。if(timer == null){fn.apply(this, args);timer = setTimeout(function(){timer = null;}, time || 500)}} }

惰性加載函數

惰性加載函數功能猶如它的名字，它很懶，懶得以至于不想運行。哈哈，，，來看一下代碼吧！這段代碼之前你肯定經常用到，這是解決瀏覽器的兼容性而寫的。

/*** 惰性加載函數（一）* 缺點：無論使用或者不使用，都要執行一次。* @el 單個DOM節點* @type {String} 事件名稱* @handler {Function} 函數* * */var addEvent=(function(win){if(win.addEventListener){return function(el,type,handler){el.addEventListener(type,handler,false);}}if(win.attachEvent){return function(el,type,handler){el.attachEvent("on"+type,handler);}} })(window)/*** 惰性加載函數（二）* @el 單個DOM節點* @type {String} 事件名稱* @handler {Function} 函數* 缺點：重新改寫原函數* 優點：只有執行時才會改寫。* */var addEvent=function(el,type,handler){if(win.addEventListener){addEvent= function(el,type,handler){el.addEventListener(type,handler,false);}}else if(win.attachEvent){addEvent= function(el,type,handler){el.attachEvent("on"+type,handler);}}addEvent(el,type,handler); }

惰性加載函數（一）比較勤快，所有呢！為了保證你的代碼能夠運行，你把這段代碼放在最上邊。這個函數其實也很簡單，瀏覽器加載則執行它，然后根據addEventListener與attachEvent的支持情況返回一個匿名函數給addEvent。你呢！只負責調用就行啦！它的缺點是最少執行一次。

惰性加載函數（二）跟它名字一樣，“不要跟我比懶，我懶得跟你比”。只有在你調用它的時候它會根據addEventListener與attachEvent的支持情況從寫addEvent函數。

總結

函數真的很重要，在你學習js的時候，你一定要深入去學習函數。沒有了函數可以說js跟廢物一樣。就拿上邊來看，它就幫我們解決了好多平時都經常遇到的問題。

?

轉載于:https://www.cnblogs.com/xiaoxiaokun/p/7224870.html

總結

以上是生活随笔為你收集整理的函数用法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。