防抖和节流(手撕!)

防抖
在事件被触发n秒后再执行回调, 如果这n 秒内又被触发, 则重新计时(如 输入用户名让后台验证, 为了避免频繁向后台发送请求, 需等用户停止输入后才向后台发送验证信息)。resize、scroll事件。

var debounce = function (func, delay) {
	return function (args) {
		var that = this;
		var _args = args;
		clearTimeout(timer);
		var timer = setTimeout(() => {
			func.call(that, _args);
		}, delay);
	}	
}

节流
规定在一个时间单位内只能触发一次函数。如果多次触发, 则只要一次生效。比如表单的多次提交。

	var throttle = function(func, delay) {
		var last, deferTimer;
		return function(args) {
			var that = this;
			var _args = args;
			var now = +new Date();
			if (last && now - last > delay) {
			// 超过了限定的时间执行函数;
				last = now;
				func.call(that, _args);
			} else {
			// 没有超过时, 清除。
				clearTimeout(deferTimer);
				deferTimer = setTimeout(() => {
					last = now; // 赋值last
					func.call(that, _args);
				}, delay);
			}
		}
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值