最近考虑优化公司微信小程序项目,便从最常见的API请求的优化考虑,并由此延展出了一条愈陷愈深的探索之旅。Orz...
首先考虑的是引入防抖,节流函数代码如下:
common.js
// 防抖函数
const debounce = (fn, interval) => {
var timer;
var gapTime = interval || 1000; //间隔时间 不传值默认为1000ms
return function () {
clearTimeout(timer)
var that = this;
var args = arguments;
timer = setTimeout(() => {
fn.call(that, args)
}, gapTime)
}
}
// 节流函数
const throttle = (fn, interval) => {
var enterTime = 0; //触发函数
var gapTime = interval || 300; // 间隔时间,如果interval不传值,默认为300ms
return function () {
var that = this;
var args = arguments;
var backTime = new Date(); // 第一次函数触发的时间
if (backTime - enterTime > gapTime) {
fn.call(that, args)
enterTime = backTime //赋值第一次触发的时间,保存第二次触发时间
}
}
}
export default { debounce, throttle };
页面使用如下:
正确的使用方法
handleFun:app.common.throttle(function(){
//someThing
},3000)
失败的使用方法:
handleFun:app.common.throttle(()=>{
//someThing
},3000)
从这两处使用差异开始了一系列的思考,普通函数(function(){})、箭头函数(()=>{})、return function(){}的差异,
其中this指向在不同运行环境的差异,到最后javascript this的原理的思考。一系列下来总算有了一定的理解。其中比较重要的是理解了在一个对象中的匿名函数,储存的是该函数的内存地址。根据运行环境调用该函数会有不同的结果。
以下是参考的两位大佬的文章:
彻底搞懂JavaScript中的this指向问题 作者:西岭老湿
JavaScript 的 this 原理 作者:阮一峰
Comments | NOTHING