节流,多用于秒杀场景多次点击按钮情况下,规定时间内 多次点击 但是只执行第一次操作
throttle = (fn, t) => {
let last, interval = t || 500
return function () {
// 小tip let now=+new Date(),它是将Date转化成number型,
//但是Date.now()更快
let args = arguments, now = Date.now();
if (now - last > interval || !last) {
fn.apply(this, args);
last = now;
}
}
}
let fn = () => {
console.log('胖虎爱静香', Date.now())
}
setInterval(throttle(fn, 1000), 10)
思路:
在规定时间t内点击只实现第一次点击的效果,之后的重复点击都不执行,直到下一个时间开始,
last=>代表上一次点击的时间,第一次是undefined,使用的是时间戳,可以直接相减的那种,interval
如果有t就用t,没有就用500ms,时间的意识,arguments=>函数传递过来的参数,now =>当前点击的
时间(点击几次就记录几次时间戳),核心 if (now - last > interval || !last) ,两种情况,
第一次点击,last为undefined,now-last为NAN,now - last > interval为false,
然后!last=!undefined=>true,所以执行,第二次(在规定时间内),last有值了 ( last = now;),
但是now - last 会<interval,所以now - last > interva为false,last有值,!last=!1=false,
所以 if (now - last > interval || !last) {
fn.apply(this, args);
last = now;
}不执行。
```
小程序中封装的节流和防抖
···
/*函数节流
用于提交
*/
export const throttle = (fn, t) => {
let last ,interval=t||500;
return function () {
let args = arguments, now = Date.now();
if (now - last >interval || !last) {
fn.apply(this, args); //立即执行,则在wait毫秒内开始时执行
last = now;
}
}
}
/**
*
* 防抖
用于搜索框搜索
*/
export const debounce = (fn, t) => {
let delay = t || 500;
let timer;
return function() {
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
};
···