Почему метод Vue.js срабатывает дважды?

Question

[starosta46]

Пытаюсь организовать подгрузку данных на страницу при достижении конца, для этого есть:

var demo = new Vue({
    el: '#demo',
    data: {
        gridData: null,
        end : false
    },
    methods: {
        scroll: function () {
            window.onscroll = () => {
                if (this.end == false) {
                    let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

                    if (bottomOfWindow) {
                        this.end = true
                        
                        console.log("end")
                        this.upload()
                    }
                    this.end= false
                }
            };
        },
upload: function () {
            this.errored = false;
            this.loading = true;
            axios
                .get('http://localhost:8000')
                .then(response => {

                    this.gridData = response.data.content;
                })
                //.then(response => console.log(response))
                .catch(error => {
                    console.log(error)
                    this.errored = true;
                })


                .finally(() => {
                    this.loading = false;
                    this.time = null;
                });




        },
 mounted: function () {
        this.scroll
}
})

При прокрутке до конца страницы запрос на сервер отправляется два раза, хотя есть переменная, которая это блокирует. С чем это может быть связано?

P. S. куски кода выдернуты из "рабочего" проекта, поэтому могут присутствовать синтаксические ошибки, просьба не пинать. Но логика сохранена.

Answer 1

[0xD34F]

запрос на сервер отправляется два раза, хотя есть переменная, которая это блокирует

Нет такой переменной. Есть переменная, которая могла бы в подобном качестве использоваться - loading, если проверять в начале метода upload, что она не true - но она не используется никак (по крайней мере, в показанном вами огрызке кода).

UPD. Вынесено из комментариев:

есть переменная end, статус которой проверяется постоянно

А какой смысл в этой проверке, если вы сбрасываете значение end в false сразу после того, как выставили true? Можно дожидаться выполнения запроса - перенеся this.end = false в finally (однако, само по себе это не гарантирует, что вы не сможете отправлять следующий запрос до окончания предыдущего).

Comments

[starosta46]

В моем коде есть переменная end, статус которой проверяется постоянно, а перед отправкой запроса на сервер ее статус меняется. Делаю проверку не в том месте?

[0xD34F]

starosta46, дополнил ответ.

[starosta46]

0xD34F, перенес this.end = false в finally, все стало работать как надо. Забыл про асинхронность во Vue.js. Спасибо