掘友教我写代码（一）-一一网

天天潜水看掘友文章，确实学习到很多东西，但是感觉自己写代码还是达不到自己想要的效果。所以想着能不能把平常工作中遇到自己觉得不满意或者觉得可以优化但是没有太多思路的代码拿出来和掘友一起交流（空手套代码），故此有了这篇文章/系列《掘友教我写代码》，希望能和大家一起进步（希望大家伙带我进步）。

重复请求的控制

场景

其实就是一个很简单的场景，可能标题看的不是很明白，这里补充一下。提交按钮多次点击，重复发起请求，没有控制的话可能会有很多的问题，例如状态以及改变，或者页面以及跳转但是还在跳提示。

解决办法

这种问题解决办法也很常见，大家也都知道，无非以下几种，欢迎大家补充（欢迎大家提供思路，带我进步）：

单纯等本次请求结束后，才能开始下一次操作。加一个标识来控制。

let flag = false;

async function submit() {
  if(flag) return;
  flag = true;
  let res = await submitReq();
  flag = false;
}
复制代码

第二种是第一种的变种，使用闭包实现，封装到utils中作为公共方法。这么写主要是不想每个页面都要重复写一下标识。

ps: 讲真命名也是一门学问，这个方法想了下都不知道叫什么准确，lock，throttle，都好像不太准确。。这部分有经验的也可以指点一下。

function preventDuplication(callback, context) {
  let flag = false;
  return async function() {
    if(flag) return;
    flag = true;
    let arg = [...arguments];
    let res = await callback.apply(context, arg);
    flag = false;
  }
}

let submitNew = preventDuplication(submit, this)

submitNew(a,b,c...)

function submit() { ... }
复制代码

第三种则是不是严格在本次请求之后才能操作，那么就可以使用大家熟知的节流来控制了。

ps:节流函数也可以使用时间戳来实现。

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; 
        }, delay)
    }
}
复制代码