js并发问题处理记录

---

前言

今天在开发一个页面时发现快速点击两次保存，页面的数据会全部乱掉，最后定位为前端并发问题。

一、解决思路

多次快速点击保存，js会并发执行，如果在保存以前js有做业务处理，那极大可能会出问题，所以前端尽量不要处理复杂的业务逻辑，业务逻辑尽量放后端处理。
解决思路主要是想办法让前端不要出现并发的场景，我这边选择的是加锁，也就是在js进入保存方法之后加锁，后端处理完返回后解锁。

二、实现代码示例

save() {
        var _this = this;
        // 加锁，防止多次快速点击并发处理出现问题
        if (_this.lock){
          // 如果已加锁，忽略这次保存
          return ;
        }
        _this.lock = true
        // 业务逻辑处理
        .......
        _this.$ysHttp.post(_this.$urls.url, _this.$route.query, data)
          .then((result) => {
          // 返回数据处理
           .......
            // 处理完成后解锁
            _this.lock = false;
          });
      },

总结

1. 前端尽量不要实现复杂逻辑，前端只做页面的展示和操作就行
2. 如果必须要解决，就利用加锁思路处理避免重复点击