添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
仗义的夕阳  ·  [开源]基于 ...·  1 月前    · 
多情的西瓜  ·  com.alibaba.fastjson.J ...·  1 年前    · 
乖乖的铁链  ·  Google ...·  1 年前    · 
月球上的红金鱼  ·  GitLab CI 并行执行 ...·  1 年前    · 

函数的防抖

函数的防抖是在多少时间后再来执行函数,我们可以理解为这样的一种生活场景(坐升降电梯),
在点击电梯的开门按钮后,电梯会开门,然后等待一段时间来关门。但是如果在等待的期间,
有人再次点击开门按钮,那么电梯后继续等待关门时间,直到等待关门时间结束,没有人来
点击开门按钮后,电梯才会开始工作。

第一次非立即执行

export function debounce(f, t){
    let timer;
    return (...arg) => {
        clearTimeout(timer);
        timer = setTimeout(() =>{
            f( ...arg)
        }, t)
在点赞、输入框校验、取消点赞、创建订单等发送网络氢气的时候,如果我们连续点击按钮,
可能会发送多次请求。这个对于后台来说是不允许的。
在鼠标每次 resize/scroll 触发统计事件。
与函数防抖的胞兄,函数节流的原理也是大同小异,函数节流是在一定时间内我只会执行一次。

第一次非立即执行

export function throttle(f,t){
    let timer=true;
    return (...arg)=>{
        if(!timer){
            return;
        timer=false;
        setTimeout(()=>{
            f(...arg);
            timer=true;

在效果中,我们点击了非常多次,但是就只执行了4次,因为我规定的时间是1000ms执行一次。这样也是减少了执行次数。

第一次立即执行版本

export function throttleFirstExt(f, t) {
    let flag = true;
    return (...args) => {
        if (flag) {
            f(...args);
            flag = false;
            setTimeout(() => {
                flag = true
            }, t)