<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 300%;
/* background:-webkit-linear-gradient(top left,lightblue,lightgreen,orange ); */
background: #fff;
}
</style>
</head>
<body>
<script>
/**
* (节流) 在一段频繁操作种，可以触发多次，触发频率由自己指定
* func 执行函数
* wait number 设置频繁操作的时间
*
* @return
* 可以被调用的 函数
* */
function throttle(func,wait = 300){
let timer = null,
previous = 0; // 记录上一次操作的时间
return function anoymous(...params){
let now = new Date(),
remainong = wait - (now - previous); // 记录还差多久达到触发的频率
if(remainong <= 0){
// 两次操作的间隔时间已经超过wait
window.clearTimeout(timer)
timer = null
previous = now
func.call(this,...params)
}else if(!timer){
// 两次操作的间隔时间 还不符合触发频率
timer = setTimeout(()=>{
timer = null
previous = new Date()
func.call(this,...params)
},remainong)
}
}
}
function handle(){
console.log(‘ok‘);
}
window.onscroll = throttle(handle,500) // 控制频率 300ms 触发一次
</script>
</body>
</html>
