随机数 random
/**
* 随机数 [min, max]
* @param {Number} min 最小值
* @param {Number} max 最大值
*/
function random (min, max) {
return Math.ceil(Math.random() * (max - min) + min);
}
setInterval 和 setTimeout
class Time {
constructor () {
// 对象字面量 改用class 数据隔离 转为私有变量 两个计时器之间不相互影响
this.timer = null;
}
/**
* 等待指定时间后调用函数
* @param {Function} fn 处理函数
* @param {Number} duration 等待时间 单位ms
*/
setTimeout(fn, duration = 1000) {
this.clear()
this.timer = setTimeout(fn, duration)
return this.timer
}
/**
* 等待指定时间
* @param {Number} duration 等待时间 单位ms
* @return {Promise}
*/
delay(duration = 1000) {
return new Promise((resolve) => {
this.setTimeout(() => {
resolve(this.timer)
}, duration)
})
}
/**
* 间隔指定时间调用函数
* @param {Function} fn 处理函数
* @param {Number} duration 间隔时间 单位ms
*/
setInterval(fn, duration) {
// this指向time
this.setTimeout(() => {
// this指向time
fn()
this.setInterval(fn, duration)
}, duration)
return this.timer
}
clear() {
clearTimeout(this.timer)
this.timer = null
}
}
栗子
const time = new Time();
time.setInterval(() => {
console.log(this);
});
time.clear(); // 销毁组件 销毁计时器
防抖 debounce + promise
/**
*@description 防抖 debounce + promise
* 栗子:实时搜索,拖拽
* @param {Function} fn 函数
* @param {Number} delay = [500] 时延
* @param {Boolean} immediate = [false] 是否立即执行
*/
function debounce(fn, delay = 500, immediate = false) {
// 1.定义一个定时器, 保存上一次的定时器
let timer = null;
let isInvoke = false;
// 2.真正执行的函数
const _debounce = function(...args) {
return new Promise((resolve, reject) => {
// 取消上一次的定时器
if (timer) clearTimeout(timer);
// 判断是否需要立即执行
if (immediate && !isInvoke) {
const result = fn.apply(this, args);
if (isPromise(result)) {
result.then(resolve).catch(reject);
} else {
resolve(result);
}
isInvoke = true;
} else {
// 延迟执行
timer = setTimeout(() => {
const result = fn.apply(this, args);
if (isPromise(result)) {
result.then(resolve).catch(reject);
} else {
resolve(result);
}
isInvoke = false;
timer = null;
}, delay)
}
});
};
// 封装取消功能
_debounce.cancel = function() {
if (timer) clearTimeout(timer);
timer = null;
isInvoke = false;
}
return _debounce;
}
function isPromise(value) {
if (Object.prototype.toString.call(value) !== '[object Promise]') return false;
if (typeof(value.then) !== 'function') return false;
if (typeof(value.catch) !== 'function') return false;
return true;
}
栗子
function delay (duration = 1000) {
return new Promise((resolve) => {
setTimeout(resolve, duration);
});
}
const debounceChange = debounce(async (...args) => {
console.log('--- async fn start --->', ...args);
await delay(5000);
console.log('--- async fn end --->', ...args);
return 'async resolved';
}, 1000);
// const debounceChange = debounce((...args) => {
// console.log('--- fn end --->', ...args);
// return 'resolved';
// }, 3000);
debounceChange('给fn的参数').then((res) => {
console.log('--- then 1 --->', res);
});
debounceChange('给fn的参数').then((res) => {
console.log('--- then 2 --->', res);
});