Vue дроссельная заслонка от дребезга - PullRequest
Новая
       69

Vue дроссельная заслонка от дребезга

0 голосов
/ 14 июля 2020

У меня есть разбивка на страницы и выбор записей на странице для табличных данных. Когда они меняются, я запускаю refresh метод наблюдателя.

Проблема в том, когда я меняю записи и страница отличается от 1, потому что тогда у меня есть два изменения из часов - одно для выбора записей и одно для текущей страницы.

Я не хочу загружать данные из API дважды, поэтому я использовал debounce, чтобы вызывать его только один раз, но вместо debouncing функции вызываются с задержкой, одну за другой.

Вот как я это сделал: 

watch: {
    recordsQuantity() {
      this.getUsersList(
        this.currentPage,
        this.recordsQuantity
      );
    },
    currentPage() {
      this.getUsersList(
        this.currentPage,
        this.recordsQuantity
      );
    }
  },
methods: {
    ...mapMutations("search", ["setTotalRecords"]),
    getUsersList: debounce(
      function(page, countOnPage) {
        this.$store.dispatch("startLoad");
        const body = { page, countOnPage};
        this.axiosPost(
          this.$store.state.ApiUrl + "/api/mainadministration/GetUsers",
          body
        )
          .then((response) => {
            this.setTotalRecords(response.totalNumber);
            this.users = Array.from(response.resultModel);
          })
          .catch((error) => {
            this.setErrorMessage(error, "Error while getting Users list");
          })
          .finally(() => {
            this.reloadPageStarter = true;
            this.$store.dispatch("stopLoad");
          });
      },
      1000,
      { leading: true }
    )
}

Эта функция запускается, а затем через 1000 мс выполняется другой вызов.

Как это исправить?

...