![cover](https://img-home.csdnimg.cn/images/20230309035550.png)
JS:性能优化方案:lodash防抖debounce和节流throttle
1、防抖函数防抖用于减少函数请求次数,对于频繁的请求,只执行这些请求的最后一次。/*** @param {function} func - 执行函数* @param {number} wait - 等待时间* @return {function}*/function debounce(func, wait = 300){let timer = null;return function(){if(t
·
手写实现
1、防抖函数
防抖用于减少函数请求次数,对于频繁的请求,只执行这些请求的最后一次。
/**
* @param {function} func - 执行函数
* @param {number} wait - 等待时间
* @return {function}
*/
function debounce(func, wait = 300){
let timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(func.bind(this),wait);
}
}
应用示例
let scrollHandler = debounce(function(e){
console.log('scroll')
}, 500)
window.onscroll = scrollHandler
2、节流函数
节流用于减少函数请求次数,与防抖不同,节流是在一段时间执行一次。
/**
* @param {function} func - 执行函数
* @param {number} delay - 延迟时间
* @return {function}
*/
function throttle(func, delay){
let timer = null
return function(...arg){
if(!timer){
timer = setTimeout(()=>{
func.apply(this, arg)
timer = null
}, delay)
}
}
}
使用示例
let scrollHandler = throttle(function(e){
console.log(e)
}, 500)
window.onscroll = scrollHandler
Vue与lodash
文档
安装
npm i --save lodash
使用方法
// 写法一:
methods: {
// 注意function 不能省略
debounceSubmit: debounce(function() {
this.submit();
}, 500)
},
// 写法二:
created(){
this.debounceSubmit = debounce(this.submit, 500);
}
使用示例
1、对用户输入进行防抖处理
<div>
<input type="text" id="keyword">
</div>
<script>
function handleInput(e) {
console.log(this);
console.log('input:', e.target.value);
}
function debounce(func, wait) {
let timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(func.bind(this, ...args), wait)
}
}
let keyword = document.getElementById('keyword')
keyword.addEventListener('input', debounce(handleInput, 500))
</script>
在线demo: https://mouday.github.io/front-end-demo/debounce-demo.html
2、对浏览器滚动事件进行节流处理
<div id="container"></div>
<style>
#container {
height: 200vh;
}
</style>
<script>
function handleScroll() {
console.log('scrollTop:', document.body.scrollTop);
}
function throttle(func, wait) {
let timer = null;
return function (...args) {
if (timer) {
return;
}
timer = setTimeout(() => {
func.call(this, ...args);
timer = null;
}, wait)
}
}
document.addEventListener('scroll', throttle(handleScroll, 500))
</script>
在线demo:https://mouday.github.io/front-end-demo/throttle-demo.html
参考
10个非常实用的JS工具函数
vue , debounce 使用
前端性能优化 - 每一个前端开发者需要知道的防抖与节流知识
更多推荐
所有评论(0)