背景：在前端开发中，有时会为页面绑定resize事件，或为一个页面元素拖拽事件（其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序，而DOM操作是很消耗性能的，如果为这些事件绑定一些操作DOM节点的操作的话就会引发大量的计算，在用户看来页面可能就一时间没有响应，这个页面就变卡变慢了，甚至在IE下，如果绑定的resize事件进行较多DOM操作，其高频率可能直接就使得浏览器崩溃。
函数节流简单讲就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。
函数节流原理：用定时器，当触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行。
优缺点：
《JavaScript高级程序设计》中介绍的函数节流

function throttle(method,context){

    clearTimeout(method,tId);

    method.tId=setTimeout(function(){

        method.call(context);

    },100);

}

//调用

window.onresize=function(){

    throttle(myFunc);

}

//法二：

var throttle=function(fn,delay){

    var timer=null;

    return function(){

        var context=this,args=arguments;

        clearTimeout(timer);

        timer=setTimeout(function(){

            fn.apply(context,args);//context调用fn的方法，指针指向了fn

        },delay);

    }

}

//调用

window.onresize=throttle(myFunc,100);

函数节流让一个函数只有在你不断触发后停下来歇会才开始执行，中间你操作得太快它直接无视你。这样做就有点太绝了，resize一般还好，但假如写一个拖拽元素位置的程序，然后直接使用函数节流，会发现你拖动时元素是不动的，你拖完了它直接闪到终点去，所以进行优化：

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(!s_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);

解析：50ms的间隔内连续触发的调用，后一个调用会把前一个调用的等待处理掉，但每隔100ms至少执行一次。
1.具有节流效果的tab切换案例：

var timer=null;

function tab(obj){

    var target = document.getElementById(obj);

    var spans = target.getElementsByTagName("span");

    var lis = target.getElementsByTagName("li");

    for(var i=0;i<spans.length;i++)

    {

        spans[i].onmouseover = function(num){

            return function(){

                clearTimeout(timer);

                timer=setTimeout(function(){

                    for(var j=0; j<spans.length;j++)

                    {

                        spans[j].className = "";

                        lis[j].className = "";

                    }

                    spans[num].className = "current";

                    lis[num].className = "show";

                },300);

            }

        }(i);

        spans[i].onmouseout=function(){

            clearTimeout(timer);

        }

    }

}

tab("one");

2.屏幕缩放节流案例：

<body>

    <div id="demo"></div>

</body>

</html>

<script>

    var demo=document.getElementById("demo");

    var num=0;

    window.onresize=throll(function(){

        demo.innerHTML=window.innerWidth || document.documentElement.clientWidth;

        num++;

        alert(num);

    },300);

    function throll(fn,delay){

        var timer=null;

        return function(){

            clearTimeout(timer);

            timer=setTimeout(fn,delay);

        }

    }

</script>

JS函数节流的更多相关文章

  1. 也谈js函数节流

    1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...

  2. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  3. Underscore.js 函数节流简单测试

    函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js  本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...

  4. 结构-行为-样式-Js函数节流

    最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...

  5. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  6. 深入理解JS函数节流和去抖动

    一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...

  7. JS函数节流和防抖

    看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...

  8. JS函数节流代码实现

    函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...

  9. JS 函数节流与防抖

    前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...

随机推荐

  1. 方法构造和方法重载之奥特曼与大boss之战

    知识点的总结: 1.类中的方法分为两类:1.普通方法: 2.构造方法. 2.构造方法的格式:  public 类名(数据类型  参数名,...){ } 3.构造方法的用途:  1.实例化对象.  2. ...

  2. sql where and or优先级 待验证

    where 后面如果有and,or的条件,则or自动会把左右的查询条件分开,即先执行and,再执行or.原因就是:and的执行优先级最高! 关系型运算符优先级高到低为:not and or 问题的解决 ...

  3. asp.net mvc后台操作之读写xml控制首页动态页面开关显示

    一.背景 在asp.net mvc项目里,用户需要开拓几个活动版面,并以侧栏的方式呈现在首页右侧,几个活动时间不一致,为避免浏览者在活动未开放之时进入未开放的服务页面.因此不仅需要在活动代码中加入限制 ...

  4. JAVA_jdk下载和环境变量的配置

    Java是一种计算机编程语言,拥有跨平台.面向对象.泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发. 基本组成: Java由四方面组成:Java编程语言.Java类文件格式.Java虚拟 ...

  5. _UICreateCGImageFromIOSurface 使用API

    上传的时候,苹果发送邮件 Non-public API usage: The app references non-public symbols in DUO-LINK 4: _UICreateCGI ...

  6. 我的.NET自学之路

    我第一门语言接触的并不是.net,而是php刚学php感觉还好,但是一学到后面就有一点头晕乎乎的,我感觉没有一个好的编写php代码的编辑器.而且php是弱类型语言,感觉起来没有像c,java,c#这些 ...

  7. 面向对象(Object-Oriented)

    面向对象 面向对象,即我们以对象为核心去实现我们的目的,对象顾名思义:万物皆对象,一个人,一条狗... 当我们通过对象处理一些事情时,会让我们的代码清晰明了,内部高聚合,对外低耦合,即封装的思想 相比 ...

  8. 平衡二叉查找树（AVL）的理解与实现

    AVL树的介绍 平衡二叉树,又称AVL(Adelson-Velskii和Landis)树,是带有平衡条件的二叉查找树.这个平衡条件必须要容易保持,而且它必须保证树的深度是 O(log N).一棵AVL ...

  9. 数据结构作业——hash(字符串哈希）

    Hash Description 给定长度为 n ( n<=1000000)的字符串,字符串仅由小写字母的前 m ( m<=6) 个字符组成,请你计算出共有多少长度为 k( k<=6 ...

  10. C++11特性：decltype关键字

    decltype简介 我们之前使用的typeid运算符来查询一个变量的类型,这种类型查询在运行时进行.RTTI机制为每一个类型产生一个type_info类型的数据,而typeid查询返回的变量相应ty ...