之前写过但是不记得在哪了，今天同事要一个滑到页面底部加载更多内容的效果，又想起了这玩意儿，确实挺实用和常用的，谨此记之。

函数节流从字面上的意思就是节约函数的执行次数，其实现的主要思想是通过定时器阻断函数的连续执行，尤其适合用在频繁操作，比如window的resize和scroll事件等。

window的默认scroll事件间隔时间大概只有十几毫秒，如果频繁的scroll，然后去请求，然后渲染，对性能肯定有很大的影响。

大概模式:

var processor = {

    timer: null,  

    performProcessing: function(){

            // 要执行的代码

    },  

    process: function(){

        clearTimeout(this.timer);

        this.timer= setTimeout(function(){

            processor.performProcessing();

        }, 100);

    }

};  

//调用

processor.process(); 
performProcessing是要频繁执行的函数，每次process会把之前的定时器timer给清除掉。简单来说，就是performProcessing每次会延迟100ms执行，如果在这段时间内又被执行，每次都会把前面的给clear掉，保证100ms内只会执行一次。
impress通过闭包实现的函数节流：
function throttle(fn, delay) {

    var timer = null;

    return function () {

        var context = this, args = arguments;

        clearTimeout(timer);

        timer = setTimeout(function () {

        fn.apply(context, args);

    }, delay);

  };

}

两种方法各有优劣，前一个封装函数的优势在把上下文变量当做函数参数，直接可以定制执行函数的this变量；后一个函数优势在于把延迟时间当做变量。

举个栗子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script type="text/javascript">

        n=0;

        function resizehandler(){

            console.log(++n);

        }

        function throttle(method,delay){

            var timer=null;

            return function(){

                var context=this, args=arguments;

                clearTimeout(timer);

                timer=setTimeout(function(){

                    method.apply(context,args);

                },delay);

            }

        }

        window.onresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了

    </script>

</body>

</html>

函数节流升级版

var throttleV2 = function(fn, delay, mustRunDelay){

     var timer = null;

     var t_start;

     return function(){

         var context = this, args = arguments, t_curr = +new Date();

         clearTimeout(timer);

         if(!t_start){

             t_start = t_curr;

         }

         if(t_curr - t_start >= mustRunDelay){

             fn.apply(context, args);

             t_start = t_curr;

         }

         else {

             timer = setTimeout(function(){

                 fn.apply(context, args);

             }, delay);

         }

     };

 };
window.onresize = throttleV2(myFunc, 50, 100);

升级版的作用是myFun间隔50ms执行一次，100ms内必须执行，因为有可能你在50ms内使劲执行myFun，这个时候timer会被clear掉，就会导致事件永远不会执行，这是比较极端的情况。

再谈javascript函数节流的更多相关文章

  1. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  2. 简述JavaScript函数节流

    为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至 ...

  3. javaScript函数节流与函数防抖

    javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...

  4. 再谈JavaScript的数据类型问题

    JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...

  5. [转载]浅谈JavaScript函数重载

     原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...

  6. 再谈javascript面向对象编程

    前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...

  7. 再谈 javascript 数组去重

    前言 数组去重方法老生常谈,既然是常谈,我也来谈谈 双层循环 也许我们首先想到的是使用 indexOf 来循环判断一遍,但在这个方法之前,让我们先看看最原始的方法: var array = [1,1, ...

  8. [转]浅谈javascript函数劫持

    转自:Ph4nt0m Security Team 这么多年了,现在学习依然还是有很多收货,向前辈致敬.转载一方面是自己存档一份,另一方面是让更多喜欢安全的人一同学习. ================ ...

  9. JavaScript 函数节流和函数去抖应用场景辨析

    概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...

随机推荐

  1. RN 47 中的 JS 线程及 RunLoop

    RCBridge 初始化时声明了一个 CADisplayLink _jsDisplayLink = [CADisplayLink displayLinkWithTarget:self selector ...

  2. Java网络编程以及简单的聊天程序

    网络编程技术是互联网技术中的主流编程技术之一,懂的一些基本的操作是非常必要的.这章主要讲解网络编程,UDP和Socket编程,以及使用Socket做一个简单的聊天软件. 全部代码下载:链接 1.网络编 ...

  3. spring cloud ribbon源码解析（一）

    我们知道spring cloud中restTemplate可以通过服务名调接口,加入@loadBalanced标签就实现了负载均衡的功能,那么spring cloud内部是如何实现的呢? 通过@loa ...

  4. MFC Windows程序开发究竟是什么？

    MFC Windows程序开发究竟是什么? MFC是一个Application Framework.他是一个完整的程序模型. 什么是MFC?MFC是微软公司出品一个Application Framew ...

  5. Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm Lorg/gradle/api/artifacts/ModuleIdentifier;

    今天碰到一个问题, 正常的下载gradle到本地,然后到spring官网上通过他们提供的start.spring.io创建一个demo项目, 然后在idea中打开,并配置下载的gradle到idea中 ...

  6. Mysql update from

    UPDATE tab1   a INNER JOIN tab_game_version as b ON a.id=b.id SET a.advert_data=0 where a.advert_dat ...

  7. 使用scp命令，远程上传下载文件/文件夹

    1.从服务器下载文件 scp username@servername:/path/filename /local/path例如: scp ubuntu@117.50.20.56:/ygf/data/d ...

  8. Spring事务杂谈

    1. 什么是事务 事务就是以一种可控的方式,对资源进行的一组操作,保证了资源在事务前后,始终应处于被期待的正确的状态.比如不会受到宕机等原因的影响.事务本身,具有如下4种属性-ACID.(所以说事务是 ...

  9. wusir FTP与HTTP文件传输之TCP Packet解析

    向服务器传输文件(上传或下载)时,FTP与HTTP是两种最常用的应用层协议,这两个协议都是基于TCP协议之上.如果深入到数据包内(Packet)进行查看时,FTP与HTTP进行文件传输时有什么特征代码 ...

  10. windows下Composer因php_openssl扩展缺失而安装失败

    Composer(https://getcomposer.org/)是PHP下的一个依赖管理工具.你可以在你的项目中声明你所需要用到的类库,然后Composer会在项目中为你安装它们.如果你了解Nod ...