<!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>
.wrap{
height: 1000px;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script>
// 节流 触发第一次
function throttle (fn,delay){
// 记录上一次的时间
let lastTime = 0
return function () {
// 记录当前时间
let nowTime = Date.now()
// 当前时间 - 上一次的时间 >= 延迟时间
if(nowTime - lastTime > delay){
fn();
// 记录lastTime
lastTime = nowTime
}
}
}
document.onscroll = throttle(function(){
console.log('我是节流函数' + Date.now())
},1000)
// // 防抖 触发最后一次
// function debounce (fn,delay){
// // 记录上一次的延时器
// let timer = null
// return function () {
// // 清除上一次的延时器
// clearTimeout(timer)
// timer = setTimeout(function(){
// fn()
// },delay)
// }
// }
// document.onscroll = debounce(function(){
// console.log('我是防抖函数' + Date.now())
// },1000)
</script>
</body>
</html>
封装防抖节流
最新推荐文章于 2022-11-17 16:49:07 发布