js防抖节流

js防抖节流

在日常中经常会用到

防抖 就是在连续多次触发同一个事件做的优化，最后只执行一次事件响应。
节流 就是在连续多次触发同一个事件做的优化，在一定间隔内做出的事件响应。
它们都是 防止多次点击触发多次从而产生不必要的响应

上代码

防抖

使用定时器防抖

 //防抖debounce代码：
		function debounce(fn, delay) { //传入要执行的函数和防抖事件间隔
			if (typeof fn !== 'function') {    //判断是否是函数
				throw new TypeError('need a function arguments');
			}
			var timeout = null; // 创建一个标记用来存放定时器的返回值
			return function(e) {
				// 每当用户触发的时候把前一个 setTimeout clear 掉
				clearTimeout(timeout);
				// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
				timeout = setTimeout(() => {
				     fn.apply(this, arguments);
				}, delay);
			};
		}
		// 处理函数
		function handle() {
			console.log('防抖：', Math.random());
		}

		//滚动事件
		window.addEventListener('scroll', debounce(handle, 500));

节流

时间节流，判断时间是否大于节流时间执行函数，第一次默认执行

	// 时间节流
		function jieliu(func, delay) {
			let pre = 0;
			return function() {
				let now = new Date()
				let context = this
				let args = arguments
				if (now - pre > delay) {
					func()
					pre = now
				}
			}
		}

// 监听窗口大小改变背景
		function coloring() {
			let r = Math.floor(Math.random() * 255)
			let g = Math.floor(Math.random() * 255)
			let b = Math.floor(Math.random() * 255)
			document.body.style.background = `rgb(${r},${g},${b})`;
		}
window.addEventListener('resize', jieliu(coloring, 2000));

定时器节流，判断定时器是否存在，执行成功后再间隔执行

	//定时器
		function dsqjl(func, delay) {
			let st = null;
			return function() {
				if (!st) {
					st = setTimeout(() => {
						func()
						st = null
					}, delay)
				}
			}
		}
		window.addEventListener('resize', dsqjl(coloring, 2000));

是否使用apply，call根据需求