防抖
简单概括防抖的概念就是,一个频繁触发的操作但是我们只需要最后一次触发时才调用方法,这个时候我们就可以设置一个定时器,每次触发时延时一定时间才调用。即在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
function debounce(func, delay) {
let timeOut;
return function () {
clearTimeout(timeOut);
// 多次触发就重新计算时间
timeOut = setTimeout(()=> {
func.apply(this, arguments)
}, delay)
}
}
使用示例:
<body>
防抖过:<input id="debounce_ipt" type="text"><br />
没防抖:<input id="bounce_ipt" type="text">
</body>
<script>
const debounce_ipt = document.querySelector("#debounce_ipt");
const bounce_ipt = document.querySelector("#bounce_ipt");
function debounce(func, delay) {
let timeOut;
return function () {
clearTimeout(timeOut);
// 多次触发就重新计算时间
timeOut = setTimeout(()=> {
func.apply(this, arguments)
}, delay)
}
}
const debounce_validate = debounce((e) => {
console.log("防抖过的",e.target.value);
}, 1000)
debounce_ipt.addEventListener("input", debounce_validate)
bounce_ipt.addEventListener("input", (e) => {
console.log("没防抖的",e.target.value);
})
</script>

节流
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
function throttle(func, interval) {
let start = new Date();
let timeOut;
return function() {
clearTimeout(timeOut)
let now = new Date();
//如果当前时间大于等于设定的间隔时间,则执行
if(now - start >= interval) {
func.apply(this, arguments);
start = now;
} else {
//让方法在脱离事件后也能执行一次
timeOut = setTimeout(()=>{
func.apply(this, arguments)
}, interval)
}
}
}
使用实例:
<body>
节流过:<div id="throttle_div" style="width: 100px; height: 100px; background-color: pink;"></div>
没节流:<div id="unthrottle_div" style="width: 100px; height: 100px; background-color: orange;"></div>
</body>
<script>
const throttle_div = document.querySelector("#throttle_div");
const unthrottle_div = document.querySelector("#unthrottle_div");
function throttle(func, interval) {
let start = new Date();
let timeOut;
return function() {
clearTimeout(timeOut)
let now = new Date();
//如果当前时间大于等于设定的间隔时间,则执行
if(now - start >= interval) {
func.apply(this, arguments);
start = now;
} else {
//让方法在脱离事件后也能执行一次
timeOut = setTimeout(()=>{
func.apply(this, arguments)
}, interval)
}
}
}
const throttle_mouseover = throttle((e)=>{
console.log("节流过的:", e.pageX, e.pageY, "-----", new Date());
}, 1000)
throttle_div.addEventListener("mousemove", throttle_mouseover)
unthrottle_div.addEventListener("mousemove", (e)=>{
console.log("没节流过的:", e.pageX, e.pageY, "-----", new Date());
})
</script>

网友评论