函数防抖和函数节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数防抖和节流</title>
</head>
<style>
.float {
float: left;
width: 200px;
height: 200px;
border: 1px solid;
margin: 5px;
}
</style>
<body>
<div class="float" id="one">
没有处理
<div id="div1"></div>
</div>
<div class="float" id="two">
函数节流
<div id="div2"></div>
</div>
<div class="float" id="there">
函数防抖
<div id="div3"></div>
</div>
</body>
<script>
// 没有处理
var one = document.getElementById('one');
one.onmousemove = function (ev) {
getxy(ev, 'div1');
}
// 函数节流
var two = document.getElementById('two');
var tirm = true;
two.onmousemove = function (ev) {
if (!tirm) {
return;
}
tirm = false;
setTimeout(() => {
tirm = true;
getxy(ev, 'div2');
}, 1000)
}
// 函数防抖
var there = document.getElementById('there');
var setstate = false;
there.onmousemove = function (ev) {
clearTimeout(setstate);
setstate = setTimeout(() => {
getxy(ev, 'div3');
}, 1000);
}
// 获取坐标
function getxy(ev, id) {
document.getElementById(id).innerHTML = `x:${ev.offsetX},y:${ev.offsetY}`;
}
</script>
</html>
可以复制上面的代码，打开页面运行，将鼠标在不同的div上移动看到不同的效果，可以清楚的看到三者区别。
