防抖和节流
函数节流：设置一个时间间隔，如果一个频繁触发的事件发生大于该时间间隔，就执行，否则不执行。（应用在 resize 、scorll事件）
是确保函数特定的时间内至多执行一次。
- 时间戳的写法，第一次立即执行
function throttle(callback,wait) {
//定义开始时间
let start = 0
// 返回结果是一个函数
return function (e) {
//判断时间间隔，获取当前时间戳
let now = Date.now()
//判断
if (now - start >= wait) {
//如果满足判断，则执行回调函数
callback.call(this,e)//this指向返回事件源
//修改开始时间
start = now
}
}
}
- 第一次(最后一次)不立即执行的写法
function throttle(fn,interval){
let timer = null
return funtion(){
let context = this
if(!timer){
timer = SetTimeout(funtion(){
fn.apply(context,arguments)//这里的arguments是指传入的参数
timer = null
},interval)
}
}
}
- 第一次不立即执行的写法,最后一次立即执行的写法
funtion throttle(fn,delay){
let timer = null
let start = Date.now()
return funtion(){
let curTime = Date.now()
let remainTime = delay - (cutTime - start)//剩余时间= 完整间隔时间- 已经过去的时间
let context = this
cleanTimeout(timer)//要保证每次进入，都要重新计算remainTime
if(remainTime <= 0){
fn.apply(context,arguments)
start = Date.now()
}else{
timer = setTimeout(fn,remainTime)
}
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./函数节流.js"></script>
<style>
body{
height: 2000px;
background: linear-gradient(paleturquoise,pink);
}
</style>
</head>
<body>
<script type="text/javascript">
//绑定滚动事件
window.addEventListener('scroll',throttle(function (e) {
// console.log(Date.now())
console.log(e)
},500))
</script>
</body>
</html>
函数防抖：一个事件 如果在一段时间内没有再次触发 就执行，；如果再次触发，就再等一会。（应用在 input 关键字搜索事件）
是函数在特定的时间内不被再调用后执行。
function debounce(callback,time) {
//定时器变量
let timeId = null
//返回一个函数
return function (e) {
//判断
if (timeId !== null) {
//清空定时器
clearTimeout(timeId)
}
//启动定时器
timeId = setTimeout(()=>{
//执行回调
callback.call(this,e)//这里回调函数的this是外层的this
},time)
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./函数防抖.js"></script>
</head>
<body>
<input type="text">
<script type="text/javascript">
let input = document.querySelector('input')
// input.onkeydown = function (e) {
// console.log(e.keyCode)
// }
input.onkeydown = debounce( function (e) {
console.log(e.keyCode)
},500)
</script>
</body>
</html>
