前端节流和防抖（下）

节流和防抖（下）

节流

在（限定时间段内）只触发一次函数，
比如 规定时间间隔为1s ，那这个函数在1s内只执行1次
不管用户触发多少次事件，我触发函数后，1s后才能重新触发

<input class="inp" type="text" />

let input = document.querySelector('.inp');

//间隔1s时间，输出用户在input框的输入
function showVal(e) {
// console.log('this==>', this)
console.log('this.value', this.value);
console.log('e==>', e.target);
}

// 节流函数
function throttle(fn, delay) {
// 被内层函数保护的变量
let bool = false;
return function () {
// 拦截层，当函数正在运行时不执行
if (bool) {
return;
}

// 挂牌函数正在运行
bool = true;

setTimeout(() => {
// 执行函数
fn.apply(this, arguments); //this和arguments分别是修正this指向和修正参数列表

// 函数执行完毕，把牌子去掉
bool = false;
}, delay)
}
}
//绑定监听用户输入事件
input.oninput = throttle(showVal, 1000);

• 点赞
• 收藏
• 分享
• 文章举报