Windows old width coming undefined on first resize, but from 2nd time resize its working fine, Vue jS

Question

I am doing something on window resize in VUE, and wrote a function which will give me the window width after resize and just before resize, I.e. old window size and new window size,

So when I am resizing the window, on very first resize its giving the old value undefined, and from 2nd resize everything is working fine, What's wrong with it that on first instance windows old value is undefined. while I am calculating it on load (mounted) as well.

Here is the working demo

TO check the issue: resize the result window and check console, on first resize it will give old value undefined, but when you resize it again, it will work fine.

methods: {
    getWindowWidth(){
          var winWidth = window.innerWidth;
          var newWinWidth = window.innerWidth;
          console.log("initial width " + winWidth);
          var doIt;
    },
    handleResize() {
      const _this = this
      //_this.mounted();
      clearTimeout(_this.getWindowWidth.doIt);
      _this.getWindowWidth.doIt = setTimeout(function() {
        _this.getWindowWidth.winWidth = _this.getWindowWidth.newWinWidth;
        _this.getWindowWidth.newWinWidth = window.innerWidth;
        console.log("new " + _this.getWindowWidth.newWinWidth);
        console.log("old " + _this.getWindowWidth.winWidth);
        //console.log("old "+ _this.winWidth);
            if(_this.getWindowWidth.newWinWidth > 1025 && _this.getWindowWidth.winWidth < 1025){
              console.log("refresh now");
              //window.location.reload();
            }
            if(_this.getWindowWidth.newWinWidth < 1025 && _this.getWindowWidth.winWidth > 1025){
              console.log("refresh again");
              //window.location.reload();
            }
        }, 1000);
      }
    },
    mounted: function() {
    const _this = this
    window.addEventListener('resize', _this.handleResize);
    }

The `this` inside `handleResize` is not what you think it is. https://stackoverflow.com/q/17665489/9867451, https://stackoverflow.com/q/1338599/9867451, https://stackoverflow.com/q/43727516/9867451 — ibrahim mahrir, Jul 29 '20 at 11:12
Yeah, it seems like vueJS already took care of that but still you are using `getWindowWidth` like it's an object where it's not (it's a function). — ibrahim mahrir, Jul 29 '20 at 11:19

ibrahim mahrir · Accepted Answer · 2020-07-29T11:41:22.613

getWindowWidth is a method/function but you are using it like it's an object, that will wok because functions in javascript are objects but the intended behavior is not what you think it is. When you first do getWindowWidth.winWidth that won't get the variable winWidth inside getWindowWidth, that will try to read the value of the property winWidth of the object getWindowWidth which is initially undefined. It will obly have a value after the first time you set it, that explains why your code doesn't work the first time, because the first time is used to initialize those properties.

What you need to do is get rid of getWindowWidth altogether and in the mounted hook just create a regular object that holds the initial values and use that in handleResize like so:

methods: {
  handleResize() {
    clearTimeout(this.windowValues.doIt);
    this.windowValues.doIt = setTimeout(() => {         // use an arrow function here so you can refer to the same 'this' inside setTimeout and get rid of the variable '_this'
      this.windowValues.winWidth = this.windowValues.newWinWidth;
      this.windowValues.newWinWidth = window.innerWidth;
      console.log("new " + this.windowValues.newWinWidth);
      console.log("old " + this.windowValues.winWidth);
      
      if(this.windowValues.newWinWidth > 1025 && this.windowValues.winWidth < 1025) {
        console.log("refresh now");
        //window.location.reload();
      }
      if(this.windowValues.newWinWidth < 1025 && this.windowValues.winWidth > 1025) {
        console.log("refresh again");
        //window.location.reload();
      }
    }, 1000);
  }
},
mounted: function() {
  this.windowValues = {                                 // define the object 'windowValues', this object will be used in 'handleResize'
    winWidth: window.innerWidth,
    newWinWidth: window.innerWidth
    // doIt will get assigned later so no need to define it here
  };

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

Here is a working demo: https://jsfiddle.net/admqLurv/

Thanks ibrahim for help, just one thing, I can not use the arrow function as I am not using babel and I need to write it that way, Thanks Again, — Atul Rajput, Jul 29 '20 at 11:41
@AtulRajput then just use `_this` like you did before, and you're welcome! Glad I could help :-) — ibrahim mahrir, Jul 29 '20 at 11:43

Windows old width coming undefined on first resize, but from 2nd time resize its working fine, Vue jS

1 Answers1