防抖和节流的定义与实现

1.防抖和节流使用场景

在前端开发过程中，我们经常会需要绑定一些持续触发的事件，如resize、scroll、mousemove等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁的取执行函数

2.防抖

定义：所谓防抖，就是指触发事件后在 n 秒内函数只执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

策略：当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定

//翻译的案例 输入时不翻译 当输入停止一小段时间(自己给)后翻译

<div>
	<div class="input-box" contenteditable></div>  //输入要翻译内容的框
	<div class="show-box"></div>                   //输出翻译完后的内容
</div> 

<script>
    
	let oInput = document.querySelector(".input-box");
	let oShow = document.querySelector(".show-box");、

    //实现防抖的主代码
	oInput.addEventListener("input",function () {
		clearTimeout(timeout);
		timeout = setTimeout(function () {
			oShow.innerText = translate(oInput.innerText);
		},500);
	},false);
	

     //翻译函数可根据自己的需求进行设计
	function translate(str) {
		return str.split("").reverse().join("");
	}
</script>

3.节流

定义：所谓节流，就是指连续触发事件但是在 n 秒中只执行一此函数。节流会稀释函数的执行频率。对于节流，有多种方式可以实现：时间戳、定时器、束流。

策略：固定周期内，只执行一次动作，若没有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。（特点：连续高频触发事件时，动作会被定期执行，响应平滑 ）

//案例内容：当鼠标在盒子上移动时，盒子中的内容会平稳增加

<div class="container">
	0
</div>

<script>

//方法一：计时器版（建议使用）
var oCon = document.querySelector(".container");
var num = 0;
var valid = true;
oCon.addEventListener("mousemove",function () {
	if(!valid) {
		return false;
	}
	valid = false;
	setTimeout(function () {
		count();
		valid = true;
	},500);
},false)

function count() {
	oCon.innerText = num++;
}


//方法二：时间戳版
var oCon = document.querySelect(".cotainer");
var num = 0;
var time = Date.now();
oCon.addEventListener("mousemove",function () {
	if(Date.now() - time < 600) {
		return false;
	}
	time = Date.now();
	count();
},false)

function count() {
	oCon.innerText = num++;
}

//方法三：束流器版
var oCon = document.querySelect(".cotainer");
var num = 0;
var time = 0;
oCon.addEventListener("mousemove",function () {
	time++;
	if(time % 30 !== 0) {
		return false;
	}
	console.log(time);
	count();
},false)

function count() {
	oCon.innerText = num++;
}
</script>