CODEWITHSUNDEEP
javascriptjquery
Khyn E M C Santos
Khyn E M C Santos

Reputation: 17

Execute a conditional only if another conditional has already been executed

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?

Upvotes: 0

Views: 70

Answers (2)

user796446
user796446

Reputation:

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);

Upvotes: 1

Rob Bailey
Rob Bailey

Reputation: 981

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.

Upvotes: 3

Related Questions