<body style="height: 3000px">
<p>hello world</p>
<script>
window.addEventListener("scroll", () => {
thr();
// deb();
})
function ajax() {
//數據請求方法
console.log("拿到數據了")
}
var thr = throttle(ajax, 1000);//節流
var deb = debounce(ajax, 500);//防抖
//節流 (在高頻觸發下,有規律的一段時間執行一次)
function throttle(fn, time) {
var timer;//利用閉包
return function () {
if (!timer) {
timer = setTimeout(() => {
fn();
console.log("----------------節流---------------")
clearTimeout(timer);
timer = null;
}, time)
}
}
}
//防抖(在高頻觸發期間不執行,觸發結束後執行)
function debounce(fn, time) {
var timer;//利用閉包
return function () {
if (timer) {
clearTimeout(timer);
timer = null;
};
timer = setTimeout(() => {
fn();
console.log("----------------防抖---------------")
}, time)
}
}
</script>
</body>
前端防抖和節流
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章