码迷,mamicode.com
首页 > 其他好文 > 详细

函数节流

时间:2016-03-01 22:18:01      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

此文章只为了帮助自己记忆 。

以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。

  1. window对象的resize、scroll事件

  2. 拖拽时的mousemove事件

  3. 射击游戏中的mousedown、keydown事件

  4. 文字输入、自动完成的keyup事件

 

实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了throttle。

 方法1:全部东西合并成一个。

var debounce = function(idle, action){
  var last
  return function(){
    var ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function(){
        action.apply(ctx, args)
    }, idle)
  }
}

方法2:方法1的加强版,让时间累积到一个值,马上触发。

        function throttle(fn,delay,mustDoTime){
            var last;
            var id;
            return function(){
                var current = +new Date();
                var args = arguments;
                var $this = this;
                clearTimeout(id);
                //第一次时间是一样的
                if(!last){
                    last = current;
                }
                //时间超过了必须执行的时间,就直接执行
                if(current - last >= mustDoTime){
                    fn.apply($this,args);
                    last = current;
                }else{
                    id = setTimeout(function(){
                        fn.apply($this,args);
                    },delay);
                }
            }
        }
        var obj = {name:"大叔"};
        var test = throttle(function(){
            console.log(this.name);
        },100,100);
        for(var index = 0;index < 10000;index ++){
            test.call(obj);
        }

 

函数节流

标签:

原文地址:http://www.cnblogs.com/geilishu/p/5232591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!