函数防抖
-
先仔细看一下看不懂的函数防抖的定义
- 当函数在很小的一个时间段内被频繁触发的时候 , 只有当其中任意相邻两次触发之间的时间间隔达到一定长度 , 该函数才会执行一次
-
其实函数防抖就和日常生活赶公交 , 我们都希望赶得上一个道理
-
先用代码模拟一下一旦有个人上车 , 就立马开车的司机
// 开车函数 function kaiChe() { console.log('车开走了~'); } // 打开车门 var door = document.getElementById('ipt'); // 一旦有人进入就立即开车 door.oninput = kaiChe;
-
说实话我这辈子也不想碰见这种司机
-
既然如此就从我做起 , 做一名全心全意为乘客着想的好司机!
// 准备一个秒表 var clock; // 一旦有乘客上车 door.oninput = function () { // 将表清零 clearTimeout(clock); // 开始计时10秒钟 , 等后面的人上车 clock = setTimeout(() => { // 10秒内没人上车再开车 kaiChe(); }, 10000); }
-
但是呢 , 我们没必要每次都等10秒 , 也并非只有在开公交的时候需要等人 , 我们将这种等待再执行的操作抽象出来封装成函数 , 更具有通用性
function debounce(fn, delay) { var clock; return function () { clearTimeout(clock); clock = setTimeout(fn, delay); } } // 调用方式 : 4秒之内无人上车再开车 door.oninput = debounce(kaiChe, 4000); // 我计划等到周六睡懒觉嘿嘿嘿 me.onplan = debounce('睡懒觉', '周六');
-
函数防抖应用场景
-
实时搜索 ( keyup )
-
拖拽( mousemove )
-