Diving and reading articles every day, I did learn a lot of things, but I still feel that I can not achieve the effect I want to write code. So thinking can be encountered in the usual work feel dissatisfied or think but without too much thinking can be optimized the code and dig out the communication code (have), therefore this article/series digging friend to teach me how to write code, hope to be able to progress together with everybody, hope big guy with my progress).

Control of repeated requests

scenario

In fact, it is a very simple scene, the title may not be very clear, here to add. Click the submit button for many times and initiate requests repeatedly. Without control, there may be a lot of problems, such as status and change, or page and jump but still jump prompt.

The solution

This kind of problem solution is also very common, we all know, nothing more than the following, welcome everyone to add (welcome everyone to provide ideas, take me to progress) :

  1. The next operation can be performed only after this request is complete. Add an identifier to control.
let flag = false;

async function submit() {
  if(flag) return;
  flag = true;
  let res = await submitReq();
  flag = false;
}
Copy the code

  1. The second is a variation of the first, implemented using closures encapsulated in utils as a public method. The main reason for this is not to have to repeat the logo on every page.

    Ps: True naming is also a knowledge, this method is not known under the thought of what accurate, lock, throttle, seem not accurate. This part has the experience also can give directions.

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() { ... }
Copy the code

  1. The third is whether to operate strictly after the request, so you can use the well-known throttling control.

    Ps: Throttling functions can also be implemented using timestamps.

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)
    }
}
Copy the code

My doubts

  1. In the second implementation, this method is not known to be accurate, lock, throttle, it seems not accurate. This part has the experience also can give directions.
  2. What is the appropriate solution to the problem of repeated form submission and repeated operation? Should the next operation not be allowed until the request ends, or should throttling control the execution interval?
  3. Is there anything about the second method that can be optimized?
  4. Is there any other way? What do the big boys do?

conclusion

The first time to post (white prostitute) a little nervous, welcome everyone to exchange (teach me).

If everybody feels me this kind of white piao behavior is too direct not too good, can put forward suggestion, I will correct!

Finally, thank you!