学习网站建设的心得体会,seo优化搜索结果,会所类WordPress主题,优化seo教程技术#x1f468; 作者简介#xff1a;大家好#xff0c;我是Taro#xff0c;前端领域创作者 ✒️ 个人主页#xff1a;唐璜Taro #x1f680; 支持我#xff1a;点赞#x1f44d;#x1f4dd; 评论 ⭐️收藏 文章目录前言一、防抖是什么#xff1f;1. deounce-v1的基本… 作者简介大家好我是Taro前端领域创作者 ✒️ 个人主页唐璜Taro 支持我点赞 评论 ⭐️收藏 文章目录前言一、防抖是什么1. deounce-v1的基本实现2. deounce-v2的基本实现3. 应用场景4. 展示使用二、节流是什么1. throttle-v1的基本实现总结作者简介大家好我是Taro前端领域创作者 ✒️ 个人主页唐璜Taro 支持我点赞 评论 ⭐️收藏
前言
在JS防抖、节流实现过程中返回一个函数是为了让其具有更好的通用性和灵活性 提示以下是本篇文章正文内容下面案例可供参考
一、防抖是什么
防抖是一种性能优化方法它可以有效的减少因为函数被频繁调用从而导致的性能上的消耗 当事件触发时相应的函数并不会立即执行会按照传入的时间推迟执行。如果等待时间内再次被触发那么之前的计时会被清除重新开始计时直到等待时间结束只有当等待时间结束后相应的函数才会被执行 1. deounce-v1的基本实现 function debounce (fn, delay) {let timer nullconst _debounce function () {if (timer) clearTimeout(timer)timer setTimeout(() {fn()}, delay)}return _debounce
}
2. deounce-v2的基本实现
解决了 v1版本中 this 指向 问题 function debounce (fn, delay) {let timer nullconst _debounce function () {if (timer) clearTimeout(timer)const context this;const args arguments;//ES5 timer setTimeout(() {fn.apply(context, args)}, delay)}return _debounce
}3. 应用场景
在用户输入时只有在输入完成后才会进行搜索在窗口大小调整时只有在调整完成后才重新计算布局在滚动页面时只有在停止滚动后才会加载更多的内容
4. 展示使用
下面是一个例子展示如何使用返回的函数
function handleClick() {console.log(clicked)
}const debouncedClick debounce(handleClick, 1000)
window.addEventListener(click, debouncedClick)在这个例子中我们定义了一个点击事件处理函数 handleClick并使用 debounce 函数创建了一个新的函数 debouncedClick。然后我们将 debouncedClick 作为 click 事件的回调函数从而实现了防抖效果。
二、节流是什么
1. throttle-v1的基本实现 代码如下示例 总结
提示这里对文章进行总结
例如以上就是今天要讲的内容本文仅仅简单介绍了防抖函数的实现以及应用场景
