js实现防抖函数和节流函数

防抖函数(debounce)

  1. 含义:防抖函数指的是在特定的时间内没有再次触发,才得以进行接下来的函数运行;
  2. 用途:当window.onresize不断的调整大小的时候,为了避免不断的重排与重绘,可以用防抖函数设置在onresize完成后一段时间内不再有窗口大小变动,此时再进行dom的重排重绘;
	function debounce(fun,delay){
		var timer = null;
		return function(){
			if(timer !=== null){
				clearTimeout(timer);
			};
			timer = setTimeout(fun,delay);
		}
	};
	
	function handler(){
		console.log('hello')
	};
	
	window.onresize = function(){
		debounce(handler,1000);
	};

节流函数(throttle)

  1. 含义:在函数被调用成功后,短时间内不会被再次触发;
  2. 用途:当点击表单按钮的时候,能够有效的避免高频次的提交操作;
	function throttle(fun.delay){
		var flag = false;
		return function(){
			var _this = this;
			var args = arguments;
			if(flag){
				return;
			}else{
				flag = true;
				setTimeout(function(){
					fun.apply(_this,args);
					flag = false;
				},delay);
			}
		}
	};

	function handler(){
		console.log('world');
	};

	window.addEventListener('scroll',throttle(handler,1000));

总结:

  • 相同防抖和节流函数都可以有效的减少短时间内触发同一函数的频次;
  • 不同的是以百度首页的输入框自动提示搜索关联词功能为例
    • 防抖函数会确定在你输入完成后的一定时间(delay)去请求接口数据;
    • 节流函数会在你整个输入过程期间内,没过一定时间(delay)请求一次接口数据;

加入QQ群,和更多同道中人一起happy吧!!!
86

发布了10 篇原创文章 · 获赞 1 · 访问量 666
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览