文章目录
本文详细介绍了防抖与节流的应用与代码实现、优化。其中函数节流实现了定时器版本和时间戳版本，不同版本均有做优化处理
一、防抖
1.1 定义
防抖指只有在n秒内没有再次触发某个函数时，才会真正执行这个函数；若n秒内再次触发此函数，则重新计算时间，如：在进行搜索的时候，当用户停止输入后才调用方法节约请求资源
1.2 应用场景
- 输入框中频繁的输入内容，搜索或者提交信息；
- 频繁的点击按钮，触发某个事件；
- 监听浏览器滚动事件完成操作；
- 用户缩放浏览器的resize事件(浏览器窗口大小发生变化时触发)
1.3 实现
使用第三方库underscore
js手写
<body>
<input type="text">
<button id="cancel">取消</button>
</body>
- 防抖功能的基本实现
//版本一、防抖函数的基本实现
<script>
let count = 0;
const inpt = document.querySelector('input');
const foo = function (e) {
console.log(`发送第${
++count}次请求`,this,e);
};
//防抖函数的基本实现
function myDebounce(fn, delay) {
// 1.定义一个定时器
let timer = null;
const _debounce = function () {
// 取消上一次的定时器
if (timer) clearTimeout(timer);
// 延迟执行函数
timer = setTimeout(() => {
//修正fn函数this指向以及传递参数，否则this指向为window，参数为undefined
fn.apply(this, arguments);
}, delay);
};
return _debounce;
}
//没使用防抖函数
// inpt.oninput = foo
//使用防抖函数
inpt.oninput = myDebounce(foo, 800);
</script>
没使用防抖效果：
使用防抖效果：
- 优化防抖函数：增加立即执行效果
//版本二、新增立即执行效果
function myDebounce2(fn, delay, immediate = false){
let timer = null
let isimmediate = false
const _debounce = function(){
if (timer) clearTimeout(timer)
// 判断是否需要立即执行
if(immediate 
最低0.47元/天 解锁文章
9687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
