函数执行时,代码的同异步问题。

104 阅读1分钟
hot_list() {
      var params = {
        from: this.checkList,
      };
     hotlist(params)
        .then((res) => {
          this.data_lits = res.data.data;
          var arry_title = [];
          var arry_key = [];
          this.list = [];
          this.list2 = [];
          this.data_lits.forEach((item, index) => {
            arry_title.push(item.hot_title);
            if (index < 5) {
              this.list.push({
                flag: false,
                _id: item._id,
                hot_title: item.hot_title,
                id: index + 1,
                video_list: item.video_list,
                exist: item.exist,
              });
            } else {
              this.list2.push({
                flag: false,
                _id: item._id,
                hot_title: item.hot_title,
                id: index + 1,
                video_list: item.video_list,
                exist: item.exist,
              });
            }
          });
          this.update_list(this.list[0], 0);
          this.formLabelAlign.hot_title = arry_title[0];
        })
        .catch((err) => {});
    },

备注

  • 以上情况,如果连续触发函数,因为axios是异步的,清空代码的操作是同步。当函数被快速点击执行时,多次axios的操作被放到异步队列中并不执行,等到执行同步操作完成后,执行异步代码。此时,同步中的清空操作(this.list = []; this.list2 = [];)不会再触发。所以,异步代码被 连续多次执行。(此种情况,只会在连续快速触发函数的时候才会发生);

  • 这个情况是在项目中某个页面,渲染排行榜列表时进行多次快速连续点击会出现。