防抖和节流有什么区别，怎么写，应用场景

区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

1.防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

1.登录短信验证防止用户点击太快，多次请求数据
2.文本编辑器实时保存，当无任何更改操作一秒后进行保存
3.银行转账，支付，防止多次支付

//防科debounce代码,
		function debounce(fn,delay) {
			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));

2.节流(thorttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

1.scroll 事件，每隔一秒计算一次位置信息等
2.input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (不同的应用场景下也可做防抖)
3.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

//节流throttLe代码:
		function throttle(fn,delay) {
			let canRun = true;//逸过湖包保存一个标记
			return function () {
			//在函数开头判断标记是否为true，不为true 到return
			if ( !canRun) return;
			//立即设置为faLse
			canRun = false;
			//将外部传入的函数的执行放在setTimeout中
			setTimeout(()=>{
				//最后在setTimeout执行完毕后再把标记设置为true(关)表示可以执行下一次循环了。
				//当定时器没有执行的时候标记永远是false，在开头被return掉
				fn.apply(this,arguments);
				canRun = true;
			}，delay);
		};
		function sayHi(e){
			console.log('节流: ', e.target.innerwidth,e.target.innerHeight);
		}
		window .addEventListener( 'resize", throttle(sayHi , 500));