仅当另一个条件已经执行时才执行条件

Question

I'm trying to send two events to Google Analytics when two if conditionals are met when the user resizes the browser window.

These events are: Mobile browser width and Non-mobile browser width

For this, I am using the following code:

$(window).resize(function(){
   if(window.outerWidth >= 800){
     gtag('event', 'Mobile browser width', {'event_category': 'BrowserWidth'});
   
   if(window.outerWidth <= 801){
   gtag('event', 'Non-mobile browser width', {'event_category': 'BrowserWidth'});
   }
  });

But I am facing a problem: due to the nature of .resize () , these conditionals are met for each resized pixel, which consequently causes the gtag () event to be fired numerous times, and that is not what I expected to happen.

What I want is for the Mobile browser width event to be triggered once, and to be triggered again only if the Non-mobile browser width event has already been triggered.

Here is an example of the order in which these events should be sent to Google Analytics:

1st resize() activation: Is window.outerWidth <= 801 ? True! Then dispatch Mobile browser width event

2nd resize() activation: Is window.outerWidth <= 801 ? True! Then do not dispatch Mobile browser width event

3rd resize() activation: Is window.outerWidth >= 800 ? True! Then dispatch Non-mobile browser width event

4th resize() activation: Is window.outerWidth <= 801 ? True! Then dispatch Mobile browser width event

5th resize() activation: Is window.outerWidth >= 800 ? True! Then dispatch Non-mobile browser width event

... and so on.

This is the most didactic way I found to exemplify how I want events to be sent to Google Analytics. Could someone help me on how to adapt my code to respect these rules?

Answer 1

You could store a reference to the previously fired event then check that variable before firing a new event. Something like:

let latestEvent;
$(window).resize(function () {
  if (window.outerWidth >= 800 && latestEvent !== 'mobile') {
    gtag('event', 'Mobile browser width', { event_category: 'BrowserWidth' });
    latestEvent = 'mobile';
  }
  if (window.outerWidth <= 801 && latestEvent !== 'desktop') {
    gtag('event', 'Non-mobile browser width', {
      event_category: 'BrowserWidth',
    });
    latestEvent = 'desktop';
  }
});

Or a boolean for isMobile would also work.

Answer 2

You need to implement some kind of debounce function

NOTE: this have been updated to include part of @rob bailey's answer. Here is a working jsfiddle.

The advantage to this approach is you really only want to fire the function once....not multiple times. That's a waste of cycles and can lead to poor performance.

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var isMobileEvent = false;

var myEfficientFn = debounce(function() {
    if (window.outerWidth > 800 && !isMobileEvent) {
    gtag('event', 'Mobile browser width', { event_category: 'BrowserWidth' });
    isMobileEvent = true;
  }
  if (window.outerWidth < 801 && isMobileEvent) {
    gtag('event', 'Non-mobile browser width', {
      event_category: 'BrowserWidth',
    });
    isMobileEvent = false;
  }
}, 250);

window.addEventListener('resize', myEfficientFn);