本文介绍了JavaScript中两种重要的性能优化技巧——防抖(debounce)和节流(throttle)函数的实现。防抖函数用于限制函数的频繁执行，而节流函数则控制函数在一定时间内只执行一次。通过引入这两个函数，可以有效防止短时间内重复请求，提高应用性能。示例代码展示了如何在实际场景如搜索输入中应用这些技术。
为了优化性能，避免短时间重复请求
新建util.js文件
// 防抖函数
let debounce = function (func, delay){
let timer;
return function(){
let _this = this;
let args = arguments;
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
func.apply(_this,args);
},delay);
}
}
// 节流函数
let throttle = function(func, delay){
let timeout;
return function(){
let _this = this;
let args = arguments;
if(!timeout){
timeout = setTimeout(()=>{
timeout = null;
func.apply(_this, args);
},delay)
}
}
}
export { debounce, throttle }
页面引用util.js
import { debounce } from '../../js/util.js'
searchInput: debounce(function(e){
var value = e.detail.value
if (value) {
this.setData({
inputValue: value
});
this.getSearchList();
}
},500),
3120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
