函数防抖
防抖--防止一个函数,短时间内多次被触发,希望抖动结束执行一次
抖动 一个函数 短时间内被多次执行
<body>
<input type="text" name="" id="">
<script>
/*
防抖--防止一个函数,短时间内多次被触发,希望抖动结束执行一次
抖动 一个函数 短时间内被多次执行
*/
let ipt = document.querySelector("input");
// 定义一个变量,flag 记录一个状态
// 保存的 延时器的返回值
let flag = null;
ipt.oninput = function () {
console.log('input');
/*
第一次 清空一个 null的延时器
同时启动 一个延时器,返回值 存入flag
如果1000内 又触发了input事件。
清空上一次延时器,
同时启动 一个新的延时器,返回值 存入flag
直到 连续的抖动 结束 ,1000后就会执行box函数
*/
clearTimeout(flag);
flag = setTimeout(() => {
box()
}, 1000);
}
function box() {
console.log('检查用户的输入');
}
</script>
</body>
防抖封装
<body>
<input type="text" name="" id="">
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
/*
防抖--防止一个函数,短时间内多次被触发,希望抖动结束执行一次
抖动 一个函数 短时间内被多次执行
*/
let ipt = document.querySelector("input");
// 定义一个变量,flag 记录一个状态
// 保存的 延时器的返回值
// 接收 两个参数 -一个 抖动结束要执行的函数, 抖动的时间间隔
// 返回 一个新函数,新函数里面 得调用 抖动结束要执行的函数
function debounce(callbackFn, interval) {
let flag = null
return function () {
//被多次执行
// 清除上一次
clearTimeout(flag)
// 开启的一个新的
flag = setTimeout(() => {
callbackFn()
}, interval);
}
}
// 建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法
function box() {
console.log('检查用户的输入');
}
// 返回一个防抖函数,
// 防抖函数 短时间内(1000毫秒) 被多次调用,会保证 box 在抖动结束会执行一次
// let newFn = _.debounce(box, 1000)
// ipt.oninput = function () {
// console.log('input');
// newFn()
// }
// let newFn = debounce(box, 1000)
// ipt.oninput = newFn;
// 把返回的防抖函数 直接作为事件处理函数
ipt.oninput = debounce(box, 1000);
</script>
函数节流
节流 控制一个函数 短时间的执行的次数
节流就是 控制 函数多次触发 之间的事件间隔。 比如原来每个1ms执行一次,通过节流可以调整 为每个200ms执行一次
<input type="text" name="" id="">
<script>
//节流 控制一个函数 短时间的执行的次数
// input 输入事件--如果用户输入很快--input事件短时间内多次触发
// 节流就是 控制 函数多次触发 之间的事件间隔。 比如原来每个1ms执行一次,通过节流可以调整 为每个200ms执行一次
let ipt = document.querySelector('input');
let flag = false;//记录 是否 有一个 延时器启动 得等待执行check函数
ipt.oninput = function () {
// 如果没有延时器在等待执行check函数, 就去开启一个,并且 把flag 变为 true
if (flag == false) {
flag = true
timer = setTimeout(() => {
check();
//一旦定时器 执行函数,flag 变为 false
flag = false;
}, 1000);
}
// 第一次触发input事件 开启一个延时器 ,200毫秒以后执行
// 第二次触发input事件 判断 是否已经有一个 延时器在等待执行 check函数
}
function check() {
console.log('检测用户的输入');
}
</script>
节流封装
<body>
<input type="text" name="" id="">
<script>
//节流 控制一个函数 短时间的执行的次数
// input 输入事件--如果用户输入很快--input事件短时间内多次触发
// 节流就是 控制 函数多次触发 之间的事件间隔。 比如原来每个1ms执行一次,通过节流可以调整 为每个200ms执行一次
let ipt = document.querySelector('input');
function throttle(func, wait) {
let flag = false;//记录 是否 有一个 延时器启动 得等待执行check函数
return function (...args) {
console.log(this);// 事件处理函数中的this
if (flag == false) {
flag = true
timer = setTimeout(() => {
// func();--调用func 并且改它里面的this
func.call(this, ...args)
//一旦定时器 执行函数,flag 变为 false
flag = false;
}, wait);
}
}
}
// 调用节流函数,返回一个新函数,新函数连续多次被执行,会每个1000毫秒执行check一次
// let newFn = throttle(check, 1000)
// ipt.oninput = newFn;
ipt.oninput = throttle(check, 1000);
// let newFn = throttle(check, 1000)
// ipt.oninput = function () {
// newFn()
// };
function check(evt) {
console.log('检测用户的输入');
console.log(this);//希望在这里能用到 事件函数中的this
console.log(evt);
}
</script>
</body>