函数节流的定义: 规定的单位时间内只执行一次,如果在单位时间内执行了多次,那么最后也只会执行一次。
<div id="div1" draggable="true" >节流函数</div>
// 节流函数
function throttle(fn, dealy = 100) {
let timer = null;
return function() {
if (timer) {
return; /// 如果在单位时间内执行了多次,那么最后都会return出去也只会执行一次。
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, dealy);
};
}
let div1 = document.getElementById("div1");
div1.addEventListener(
"drag",
throttle(function(e) {
console.log(e.offsetX);
}, 2000)
);