js的 防抖（debounce）和 节流（throttle ）
防抖和节流一般用于高频触发事件，属于浏览器性能优化，解决高频发时间导致的浏览器卡顿，或者是不断的发起数据请求，使服务器端返回数据过慢或卡死~
防抖
一个简单的例子，监听一个input框的数据请求：
function search10(){
...ajax查询请求
}
document.getElementById('aaa').onkeydown = search10
在 中文输入法 下，无论我是否输入完成，反正我只有输入了东西就会 一直发起请求 ，所以就…很慢…
我想让我这一个或一段中文输入完成后在发起请求，所以优化成了这样：
function debounce(func,wait){
let timer;
return function() { //闭包
if(timer) clearTimeout(timer)
timer = setTimeout(func,wait)
}
}
function search10(){
...ajax查询请求
}
document.getElementById('aaa').onkeydown = debounce(search10,1000)
好了，如此便解决了我的需求，我的请求在触发的每1秒内会触发一次，时间可控，完美！
节流
这个不好沿用上面的例子，因为1秒（时间可控）内我输入完成了，可是上一次settimeout还没执行结束~
所以想到了一个新场景，在监听滚动条，或者是鼠标移入移出等事件的时候，可以很好的用到这个：
function throttle = function(func, wait) {
let timer = null;
return function() {
let context = this;
let args = arguments; // arguments中存着e
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, wait);
}
}
}
function myEvent(){
...myEvent
}
document.getElementById('aaa').onmousemove= debounce(myEvent,1000)
这里节流保证了1秒内只会执行一次我的方法
好了 完事儿
=========
收藏一个input各种事件
https://blog.csdn.net/weixin_41655541/article/details/89850349
