Функция Debounced никогда не срабатывает в VueJS

Question

Я установил этот Vue пакет:

https://www.npmjs.com/package/debounce

Мне нужно, чтобы он отклонял обработчик событий, который срабатывает при изменении размера окна:

    created() {
        window.addEventListener("resize", this.handleResize);
    },

    destroyed() {
        window.removeEventListener("resize", this.handleResize);
    },

    methods : {
        handleResize : function() {
            debounce(function (e) {
                let date = new Date();
                let timestamp = date. getTime();
                console.log(timestamp);
            }, 1000, true)
        },
    }

никогда не происходит, когда я изменяю размер окна. Когда я удаляю бит противодействия и просто оставляю следующее, он работает:

        handleResize : function() {
            let date = new Date();
            let timestamp = date. getTime();
            console.log(timestamp);
        },

Как мне заставить это работать?

Answer 1

На данный момент вы this.handleResize - это просто функция для создания функции защиты от ошибок, поэтому при изменении размера окна вы просто создаете новую функцию защиты от ошибок.

Ваш код должен быть примерно таким:

    created() {
        this.handleResize = debounce(function (e) {
            let date = new Date();
            let timestamp = date. getTime();
            console.log(timestamp);
        }, 1000, true)

        window.addEventListener("resize", this.handleResize);
    },

    destroyed() {
        window.removeEventListener("resize", this.handleResize);
    }

или

    data: () => ({
        handleResize: debounce(function (e) {
            let date = new Date();
            let timestamp = date. getTime();
            console.log(timestamp);
        }, 1000, true)
    })
    created() {
        window.addEventListener("resize", this.handleResize);
    },

    destroyed() {
        window.removeEventListener("resize", this.handleResize);
    }