首先来说防抖，防抖最主要用于input搜索框，切框内注册的是input事件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入文本">
\
<script>
/*
1.函数防抖 : 单位时间内频繁触发事件, 只会触发‘最后一次’
2.防抖场景 : 输入框输入事件 oninput
3.防抖流程 :
(1)声明全局变量存储定时器ID
(2)每一次触发事件的时候,先清除上一次定时器
(3)开启本次 防抖定时器
PS : 只要用户在单位时间内触发事件,之前的事件定时器就会被清除。只有当用户在单位事件不触发事件，等待定时器到事件自动执行。这样就实现了单位事件永远只会触发最后一次事件效果。
*/
\
//(1)声明全局变量存储定时器ID
let timeID = null
\
document.querySelector('input').addEventListener('input',function(){
//(2)每一次触发事件的时候,先清除上一次定时器
clearTimeout(timeID)
//(3)开启本次 防抖定时器
/*
定时器中function ： 指向window
箭头函数 : 没有this,访问上级this, 指向事件源
*/
timeID = setTimeout( ()=>{
console.log(`发送ajax请求:${this.value}`)
} , 300 )
})
\
</script>
</body>
</html>
函数节流
<html lang="en">
\
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
</head>
\
<body>
\
\
<script>
/*
1.函数节流 : 单位时间内频繁触发事件,只会‘触发一次’
2.节流场景 : 解决事件高频触发。 滚动条事件、鼠标移动
3.节流思路 :
(1)声明一个全局开关 let flag = true
(2)触发事件的时候,判断开关。
如果是true : 触发事件,把开关改为false
如果是false : 不触发事件
(3)开启节流定时器,在节流时间之后把开关改为true
*/
\
\
//(1)声明一个全局开关 let flag = true
let flag = true
\
let i = 1
window.onscroll = function () {
//(2)触发事件的时候,判断开关。
if (flag) {
//触发事件,把开关改为false
flag = false
console.log(`滚动事件触发次数:${i++}`)
//(3)开启节流定时器,在节流时间之后把开关改为true
setTimeout(function () {
flag = true
}, 300)
}
\
}
\
// let j = 1
// window.onmousemove = function(){
// console.log(`鼠标移动事件触发次数:${j++}`)
// }
\
</script>
</body>
\
</html>
