防抖函数-debounce
Posted 好_快
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了防抖函数-debounce相关的知识,希望对你有一定的参考价值。
1. 功能 debounce
减少高频率执行代码的执行频率。
2.使用场景
- oninput
- onresize
- onscroll
- onmousemove
- onmousehover
- 等等
3.防抖原理
3.1 利用 setTimeout 延迟执行逻辑代码。通过 clearTimeout 将执行次数降低 1
let timer = null;
element2.onkeyup = (event) =>
if (timer)
window.clearTimeout(timer);
timer = setTimeout(() =>
console.log("防抖版本--发送网络请求:", event.target.value);
, 1000);
;
3.2 封装工具函数
function debounce(fun, delay = 500)
let timer = null;
return function ()
if (timer)
window.clearTimeout(timer);
timer = setTimeout(() =>
//无法传递event参数
// fun();
fun.apply(this, arguments);
, delay);
;
以上是关于防抖函数-debounce的主要内容,如果未能解决你的问题,请参考以下文章
43.Vue中使用Lodash 节流(throttle)和防抖(debounce)函数