JS 节流防抖

一.防抖：

1.概念：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

防抖是将多次执行变为最后一次执行，一个高频事件触发后 n 秒内函数只会执行一次，如果在 n 秒内高频事件再次被触发，则重新计算时间。这就像如果你正在等公交车，只要在等待时间内有人上车，公交车就会等到这个时间结束后才开走。

2.实现原理：

关键点：setTimeout 定时器 apply  arguments 闭包

setTimeout：

全局的 setTimeout() 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。

clearTimeout：

WindowOrWorkerGlobalScope 内置的 clearTimeout() 方法取消了先前通过调用setTimeout()建立的定时器。

apply：

 Function 实例的 apply() 方法会以给定的 this 值和作为数组（或类数组对象）提供的 arguments 调用该函数。

arguments：类数组

arguments 是一个对应于传递给函数的参数的类数组对象。

闭包：

闭包是在函数内部可以访问函数外部的变量。

        闭包就是函数内部可以访问外部的变量，即使外部函数已经执行完毕

        有一个缓存的变量不会被垃圾回收的效果

最简单的闭包现象

funciton fn() {
var a= a;
return function() {
console.log(a);//内部函数可访问外部变量
}

3.防抖具体代码实现 

function debounce(fn, times = 300, imediate = false) {
	let timer = null;
	// 定义全局判断上一次是否是立即执行
	let isVoke = false;

	const _debounce = function (...args) {
		if (timer) {
			clearTimeout(timer); //取消上一次定时器
			timer = null;//清除定时器缓存
		}
		if (imediate && !isVoke) {
			//!isVoke=true
			fn.apply(this, args);
			// imediate=false //立即执行完成之后改成false   分析问题 当下一次重新输入时  不会立即执行=>延迟执行
			isVoke = true; //这里赋值为true 当上一次执行完毕后赋值为true //让其延迟执行
		} else {
			//延迟执行
			timer = setTimeout(() => {
				//延迟执行
				fn.apply(this, args); //外部传入的函数 
				isVoke = false; //abcd=> 当abcd执行完后重启false   在判断是否立即执行
			}, times);
		}
	};
	return _debounce;
}

二.节流：

1.概念：

间隔 n 秒执行该事件，如果在 n 秒内重复触发，只有一次会生效

节流是在一定时间间隔内，只允许事件触发一次。如果在这个时间间隔内事件被多次触发，只有第一次会生效。这就像是电梯在固定的时间内只运行一次，无论这期间有多少人进入电梯。

2.实现原理：

Date.now() 

Date.now() 方法返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。

apply：

 Function 实例的 apply() 方法会以给定的 this 值和作为数组（或类数组对象）提供的 arguments 调用该函数。

闭包：

闭包是在函数内部可以访问函数外部的变量

节流具体代码实现

function throttle(fn, delay) {
	let prev = Date.now(); //当前时间戳

	return function () {
		let context = this,
			args = arguments,
			now = Date.now(); //new Date().getTime()

		if (now - prev >= delay) {
			fn.apply(context, args);
			prev = Date.now();
		}
	};
}