函數節流

時間 2019-11-10

標籤函數節流简体版

原文原文鏈接

什麼是javascript函數節流？從其字面意思能夠大概猜到是一種爲提高函數調用執行性能的一種方法。javascript函數節流就是針對調用頻率高的函數，經過設置定時器，使其在執行後間隔一段時間，才進行下一次的執行，避免重複頻繁的調用致使的瀏覽器性能以及ajax重複調用問題。javascript

函數節流的經典應用場景：onresize，scroll，mousemove ,mousehover等事件回調函數的無間斷執行。其主要實現思路就是經過setTimeout定時器，經過設置緩衝時間，在第一次調用時，建立定時器，並在定時時間結束調用。第二次調用時，會清除前一個定時器並設置新的定時器。若是這時前一個定時器暫未執行，則將其替換爲新的定時器。目的在於在必定的時間內，保證屢次函數的請求只執行最後一次調用。咱們看一個簡單實現。css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函數節流</title> <style> body{ height: 2000px; } </style> </head> <body> <script> window.onscroll = function (argument) { console.log("函數調用"); } </script> </body> </html>

未實現函數節流時運行截圖：html

經過上圖咱們能夠發現，咱們滾動頁面時，頻繁觸發了屢次的函數調用，若是函數調用中涉及到了dom操做或者接口請求的話，那將是一個惡夢。java

下面經過加入函數節流的方法：ajax

<script>
    window.onscroll = function(){
        console.log("scroll滑動"); throttle(count); } function count(){ console.log("函數調用"); } function throttle(method, context){ clearTimeout(method.tId) method.tId = setTimeout(function(){ method.call(context); }, 300); } </script>

效果以下圖，只有在中止滑動後，定時結束才執行函數處理邏輯。瀏覽器

可是可能會說，若是我想在滑動的時候，隔一段時間，無論有沒中止滑動，都要執行處理邏輯，而不是像上面同樣要等到中止以後才調用，該如何實現呢？app

var time = +new Date(); function count(){ console.log("函數調用:" + (+new Date()-time)); } /** * [@param](/user/param) {Function} * [@param](/user/param) {[Function]} 延時調用函數 * [@param](/user/param) {[Number]} 延遲多長時間 * [@return](/user/return) {[Number]} 至少多長時間觸發一次 */ var throttle = function(fn, delay, mustRun){ var timer = null, previous = null; return function(){ var now = +new Date(), context = this, args = arguments; if (!previous ) previous = now; var remaining = now - previous; if(mustRun && remaining >= mustRun){ fn.apply(context, args); previous = now; }else{ clearTimeout(timer); timer = setTimeout(function(){ fn.apply(context, args); }, delay); } } } window.onscroll = throttle(count, 500, 1000);

這樣咱們就能夠達到上面所要的效果，適合於須要頻繁調用，但又在必定的時間內必需要執行邏輯的場景。dom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。