<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: burlywood;
}
body {
height: 3000px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
var count = 0;
//防抖调用
box.onmousemove = debounce(function () {
count++;
box.innerHTML = count;
}, 1000);
//节流调用
window.onscroll = throttle(function () {
count++;
console.log(count);
}, 1000)
//防抖
function debounce(fn, wait) {
var timer = null;
return function () {
clearInterval(timer);
timer = setInterval(function () {
fn();
timer = null;
}, wait)
}
}
function throttle(fn, wait) {
var timer = null;
return function () {
if (!timer) {
timer = setTimeout(function () {
fn();
timer = null;
}, wait);
}
}
}
</script>
</body>
</html>
防抖与节流
最新推荐文章于 2024-01-17 19:06:42 发布