1、防抖：重复触发、代码不执行、重新计时、直到最后一次触发结束后代码才开始执行，当事件触发之后，约定单位时间（比如1s）之后，执行里面的代码；如果在单位时间只内再次触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。
利用定时器解决防抖：
<body>
<div id="box">
<input type="text" id="ipt">
<ul></ul>
</div>
<script src="./jquery.js"></script>
<script>
let timer = null
$('#ipt').on('keydown', function () {
clearTimeout(timer)
let keyword = $(this).val();
if (keyword === '') {
$('ul').empty().hide();
return
};
timer = setTimeout(function () {
$.ajax({
url: 'https://suggest.taobao.com/sug',
data: {
q: keyword,
code: 'utf-8'
},
dataType: 'jsonp',
success: function (res) {
let str = '';
res.result.forEach(item => {
str += `<li>${item[0]}</li>`
})
$('ul').html(str).show()
}
})
}, 1000)
})
</script>
</body>防抖的应用场景：
（1）浏览器窗口缩放，resize事件，常见应用于需要实现页面适配时
（2）表单的按钮提交事件，例如登录，发短信，避免用户点击过快，以至于发送多次请求
（3）search搜索框输入时，需要用户最后一个输入后，再发送ajax请求
（4）文本编辑器实时保存，当没有任务修改1S后进行保存
2、节流:（在规定单位时间内代码只能运行一次）当事件触发之后，约定单位时间之后，事件里面的代码最多只能执行1次，所以，节流减少了单位时间内代码的执行次数，从而提高性能（利用定时器）。
<body>
<img src="1.jpg">
<script src="./jquery.js"></script>
<script>
let timer=null
$(document).on('monusemove',function(e){
if(timer!==null) return
timer=setTimerout(()=>{
let x=e.pageX
let y=e.pageY
$('img').css({left:x+'px',top:y+'px'})
timer=null
},100)
})
</script>
</body>利用的应用场景：
(1)、鼠标事件
（2）、商品预览的放大镜效果（鼠标在小图上移动，大图没必要实时展示）
（3）、scroll事件，每间隔1s的时间，重新计算当前的位置信息