How do I use lodash debounce?

[AlexStacker]

My code is as follows:

    handleWindowResize   = debounce(() => {
        console.log(this.screenWidth);
        this.screenWidth = window.innerWidth;
    }, 100)

    @Watch('screenWidth')
    onScreenWidthChange(newVal: number): void {
        console.log(newVal);
    }

But there is no work.
When I change my code like this,

    handleWindowResize(): void {
        console.log(this.screenWidth);
        this.screenWidth = window.innerWidth;
    }

    @Watch('screenWidth')
    onScreenWidthChange(newVal: number): void {
        console.log(newVal);
    }

It can change values from screenWidth. How do I organize this code with debounce?

[ktsn]

Please use our forum or chat room to ask your questions. Issue list is reserved for bug reports or feature requests. Thanks.

[304NotModified]

@ktsn

The forum is down? Or is the link incorrect?

[ktsn]

Oops, sorry. The link is incorrect.
https://forum.vuejs.org is the correct one.

[Robula]

Since this issue is already here, why not leave an answer @ktsn ?

[NikitaKA]

#263 (comment)

[gbalduzzi]

I found a solution here

First, you should define your not-debounced function:

handleWindowResize(): void {
     console.log(this.screenWidth);
     this.screenWidth = window.innerWidth;
}

Then, use debounce with this function instead of an anonymous one:

handleWindowResizeDebounced = debounce(this.handleWindowResize, 100)

Now you simply need to call handleWindowResizeDebounced and you will have your debounced function without the need of an additional dependency