文章目录
手写一个 Promise
function Promise(executor) {
let _this = this;
this.state = 'pending' // 状态
this.value = undefined; // 成功结果
this.reason = undefined; // 失败原因
this.onFulfilledFunc = []; // 保存成功回调
this.onRejectedFunc = []; // 保存失败回调
function resolve(value) {
// 只有在pending状态下才可以改变状态
if (_this.state == 'pending') {
_this.value = value; // 保存成功结果
_this.onFulfilledFunc.forEach(fn => { fn(value) });
_this.state = 'resolved';
}
}
function reject(reason) {
// 只有在pending状态下才可以改变状态
if (_this.state == 'pending') {
_this.reason = reason; // 保存失败原因
_this.onRejectedFunc.forEach(fn => { fn(reason) });
_this.state = 'rejected';
}
}
// 如果executor执行报错,直接执行reject
try{
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
节流函数
节流函数确保一个函数在一个时间间隔内只会被执行一次,即使在这段时间内该函数被多次调用。这样可以保证在一定频率下执行任务,而不是积累大量待处理的任务。比如在滚动监听事件中,每滚动一段距离才执行一次计算或更新操作。
function throttle(func, delay) {
let lastExecution = 0; // 记录上次执行的时间
return function(...args) {
const now = Date.now(); // 获取当前时间
if (now - lastExecution > delay) { // 如果距离上次执行已经超过设定的delay时间
func.apply(this, args); // 执行函数
lastExecution = now; // 更新最后执行时间
}
};
}
防抖函数
防抖函数的作用是在一定时间内只执行一次操作,如果在设定的时间内再次触发,则重新开始计时。它常用于防止短时间内重复调用某个函数,比如搜索框实时搜索建议,在用户停止输入一段时间后再发送请求。
// 防抖函数实现
function debounce(fn, delay) {
let timeoutId;
// 返回一个包裹了原函数的防抖处理函数
return function(...args) {
if (timeoutId) {
clearTimeout(timeoutId); // 如果存在定时器,则先清除
}
// 重新设置定时器,使原函数fn在delay毫秒后执行
timeoutId = setTimeout(() => {
fn.apply(this, args); // 在延时结束后调用原函数并传入参数
}, delay);
};
}