函数防抖、节流、柯里化

最新推荐文章于 2022-06-25 08:38:34 发布

柠檬布丁^O^

最新推荐文章于 2022-06-25 08:38:34 发布

阅读量371

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41805715/article/details/108048513

版权

JavaScript 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的函数优化技术，包括节流在页面滚动加载时的应用，防止频繁触发；防抖确保在操作完成后再执行，如搜索框输入验证；以及函数柯里化，将多参函数转化为单参函数的链式调用，提高代码复用性。

摘要由CSDN通过智能技术生成

节流：隔一段时间触发一次，场景页面滚动加载

function throttle(fn,wait){
	let lastTime = 0;
	return function (...args){
		let now = new Date();
		if(now-lastTime>wait){
			lastTime=now;
		 	fn.apply(this,args);
		}
	}
}

防抖：完成后再发送请求，最后一个人说了算，只认最后一次，搜索框搜索输入，手机号、邮箱验证输入检测

function debound(fn,wait){
	let timer;
	return function(...args){
		if(timer) clearTimeout(timer);
		timer = setTimeout(()=>{
			fn.apply(this,args);
		},wait)
	}
}

函数柯里化：通过把一个多参函数转换成一系列嵌套的函数，每个函数一次接受一个参数。

let _fn = curry(function(a,b,c,d,e){
    console.log(a + b + c + d + e) 
});
_fn(1,2,3,4,5);    //15
_fn(1)(2)(3,4,5);  //15
_fn(1,2)(3,4)(5);  //15
_fn(1)(2)(3)(4)(5);  //15

function curry(fn,len=fn.length){
	return _curry.call(this,fn,len);
}
function _curry(fn,len,...args){
	return function (...params){
		let _args=[...agrs,...params];
		if(_args.length>len){
			return fn.apply(this,_args);
		}else{
			return _curry(this,fn,len,..._args);
		}
	}
}