JavaScript - 页面中的锁

在JS中很多时候做请求数据，或者防止重复提交等过程中，我们都会在事件之后添加一个标识符，避免用户重复请求，等请求结束后再恢复标识符。

1、这种比较固定，没有加载完成不会再次触发函数；直到请求结束后；

let state = false;

function GetMsg(){
  if(state){
     return;
  }
  state = true;
  return fetch('api.php').then(res=>{
    state = false;
}).catch(res=>{
   state = false;
})
}

2、相比上面的形式，这种锁比较灵活，函数可以多次触发，以最新的请求为准，其他的抛弃处理；

let state = 0;
function GetMsg(resources){
 var  state_index = ++sate;
  fetch('api.php').then(res=>{
   if(state===sate_index){
     渲染；
    }else{
     废弃删除
     }
  })
  .catch(...);
 };

两种锁的形式、各有优势、可以在不同的项目需求情况使用。