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

函数节流从字面上的意思就是节约函数的执行次数，其实现的主要思想是通过定时器阻断函数的连续执行，尤其适合用在频繁操作，比如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. java_I/O字节流

    I/O流(Stream) INPUT:输入流,从文件里读OUPUT:输出流,写内容到文件 IO流分为:字符流和字节流 字符流:处理纯文本文件. 字节流:处理可以所有文件. 测试字节输出流OuPut(写 ...

  2. 常用的re正则

    常用的正则表达式: 用户名:/^[a-z0-9_-]{3,16}$/ 密码:/^[a-z0-9_-]{6,18}$/ 十六进制值:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 电子邮 ...

  3. 【SpringBoot+Mybatis+thymeleaf报错】Error resolving template "XXX", template might not exist or might not be accessible by any of the configured

    解决方法一: 原因:在使用springboot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,必须有结束标签,否则会报错. 在application.y ...

  4. npm install 报错： WARN checkPermissions Missing write access to 解决方案

    经过各种百度搜索,发现这个问题的出现并不是管理员权限的问题,而是之前安装失败了,这个文件已经存在了,再次安装无法覆盖写入的问题. 解决方法: 1.找到node的全局安装路径,一般在nodejs文件夹的 ...

  5. USACO The Lazy Cow

    题目描述 这是一个炎热的夏天,奶牛贝茜感觉到相当的疲倦而且她也特别懒惰.她要在她的领域中找到一个合适的位置吃草,让她能吃到尽可能多的美味草并且尽量只在很短的距离.奶牛贝茜居住的领域是一个 N×N 的矩 ...

  6. jedis 连接redis

    一,  单机版连接 @Test public void testJedis() { //1. 创建jedis 对象 Jedis jedis = new Jedis("192.168.88.1 ...

  7. trace跟踪代码运行

    System.Diagnostics命名空间中. 1.Trace.Assert(a==12,"等于就不输出,不等于弹出对话框");   名称 描述   Assert(Boolean ...

  8. 【Kafka】Broker之Server.properties的重要参数说明

    名称 描述 类型 默认值 有效值区间 重要程度 zookeeper.connect zk地址 string 高 advertised.host.name 过时的:只有当advertised.liste ...

  9. JS写游戏

    最近在看萧井陌的视频.感觉一些东西挺有意思的,尤其是解决问题的过程,以及一个好程序应该改进的地方. 萧大的GITHUB:github.com/guaxiao/gua.game.js 视频:https: ...

  10. Android中Handler的使用方法及实例（基础回顾）

    Handler使用例1 这个例子是最简单的介绍handler使用的,是将handler绑定到它所建立的线程中.本次实验完成的功能是:单击Start按钮,程序会开始启动线程,并且线程程序完成后延时1s会 ...