javascript 函数节流

最新推荐文章于 2024-05-29 23:04:27 发布

secretx

最新推荐文章于 2024-05-29 23:04:27 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： javascript 函数节流

本文链接：https://blog.youkuaiyun.com/secretx/article/details/22591035

web 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种实用的JavaScript节流实现方法，通过一个通用的函数装饰器，可以轻松地将频繁触发的事件处理函数转化为节流版本，有效降低资源消耗并提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.函数节流的概念，意义就不多说了，看腾讯web前端AlloyTeam团队的文章，清晰易懂。给个地址：

http://www.alloyteam.com/2012/11/javascript-throttle/

2.文章中给出3个节流的例子，但是实际项目中需要升级到节流版本的javascript函数太多了，总不能一个个对葫芦画瓢，每个函数依次修改吧。习惯Python装饰器了，决定写一个通用的javascript函数，能够将其他函数简单的包装之后，使其他函数变为节流版本。

上代码：

var throttle = function(targetFunc, delay, mustRunDelay) {
    var throttleInstance = {
        timer: null,
        lastTime: 0,
        context: null,
        args: null,

        delay: function(context, args) {
    		clearTimeout(this.timer);
    		
            var currentTime = +new Date();
            if(!this.lastTime) {
                this.lastTime = currentTime;
            }
            this.context = context;
            this.args = args;
            
            if(currentTime - this.lastTime >= mustRunDelay) {
                this.doAction();
            } else {
                this.timer = setTimeout(this.timerHandler, delay);
            }
        },
        
        doAction: function() {
            targetFunc.apply(this.context, this.args);
            this.lastTime = 0;
        },
        timerHandler: function() {
            throttleInstance.doAction();
        }
    };
    return function() {
        throttleInstance.delay(this, arguments);
    };
};

使用举例：

1. 包装单独的裸函数

比如需要监听浏览器窗口大小变化事件，每次变化输出一个字符串。

window.onresize = throttle(function(){
		console.log("resized...");
	}, 
	500, 3000
);

2. 包装全局变量的共有方法

var listener = new Object();
listener.mouseover = function(e){
    console.log("mouseover");
}
listener.click = function(e){
    console.log("click");
}

有如上 listener全局变量，以及其click和mouseover两个公有方法,两个方法都是即时响应

document.getElementById('test').onclick = throttle(listener.click, 500, 3000);
//或者
document.getElementById('test').onmouseover = function() {
	return throttle(listener.mouseover, 500, 3000);
}();//括号不能掉

经过如上包装后，即为节流版本

3.在prototype构造的对象内部包装其公有方法

var Typeahead = function (element, options) {
	//do something init...
}
Typeahead.prototype = {
    constructor: Typeahead, 
	keyup: function () {
		console.log("keyup");
	}//keyup为同步响应
}

此时keyup事件即时响应。如下改变后变为节流版本

Typeahead.prototype = {
    constructor: Typeahead, 
	doKeyUp: function () {
		console.log("keyup");
	},
	keyup: throttle(function(e){
            this.realDoKeyUp(e)
        }, 500, 3000)
    //务必用一层匿名函数嵌套this.realDoKeyUp, 因为在throttle层面访问不到this
}

4.在非prototype方式构造的对象内部包装其公有方法

var HighChartDrawer = {
	createNew: function (containerId, conf) {
		var drawer = {};
		drawer.init = function() {
			//do something init...
		};
		drawer.listenSelectChange = function () {
			console.log("change...");
	    }//listenSelectChange同步响应


            return drawer;
        }
 }

此时drawer对象的listenSelectChange是即时响应的，如下改变后成为节流版本

var HighChartDrawer = {
	createNew: function() {
		var drawer = {};
		drawer.init = function() {
				//do something init...
		};

		drawer.DoSelectChange = function() {
			console.log("change...");
		},
		drawer.listenSelectChange = throttle(function () {
			drawer.DoSelectChange(); //转一次手，转而调用真正响应函数 DoSelectChange
		}, 500, 3000)


		return drawer；
 	}
}

或者

var HighChartDrawer = {
	createNew: function(containerId, conf) {
		var drawer = {};
		drawer.init = function() {
			//do something init...
		};

		drawer.DoSelectChange = function() {
			console.log("change...");
		},
		drawer.listenSelectChange = throttle(drawer.DoSelectChange, 500, 3000)

		return drawer；
 	}
}