javascript - How to prevent a function create a new event window stack when resize -

i have problem, need run function when browser width less 769px.

i'm using $(window).resize(); detect when browser changes wide.

when adjust size of browser to, example 750px, function generates new stack of event, mean is, if click on button, each event runs twice, , if change browser width again say, 700px, each of them executed 3 times. each change of width of browser long less 769px, new event listener "stacked".

how can update event , not allow new 1 created when resizing browser?

to recreate problem, follow these steps:

here's link jsfiddle reproduces problem.

1. load page
2. click button see initial behavior
3. change size of smallest browser 769px
4. click @ buttons , see new behavior.
5. resize browser smaller width of 769px
6. click on button , see behavior, event runs 3 times

code:

var app = function() {      var tempo, body;     var init = function() {         body = $('body');         $(window).resize(function() {             cleartimeout(tempo);             tempo = settimeout(showonlyone, 500);         });          showonlyone();     };      var showonlyone = function() {         console.log('executing !!!');         var mobileclass = "small-device";         var desktopclass = 'desktop-device';         var windowwidth = getwindowwidth();          if (windowwidth < 769) {             body.addclass(mobileclass);             body.removeclass(desktopclass);              $('a[data-navtrigger]')                 .click(                     function(e) {                         e.stoppropagation();                         var triggertag = $(this);                         var triggername = $(this).attr(                             "data-navtrigger");                         var activo = true;                         var activeclase = 'activoo';                          console.log('triggername: ' + triggername);                          $('a[data-navtrigger]')                             .each(                                 function(index) {                                     if ($(this).attr(                                             "data-navtrigger") == triggername) {                                         if (!$(this).hasclass(                                                 activeclase)) {                                             $(this)                                                 .addclass(                                                     activeclase);                                         } else {                                             activo = false;                                             $(this)                                                 .removeclass(                                                     activeclase);                                         }                                     } else {                                         $(this).removeclass(                                             activeclase);                                     }                                 });                          $('[data-navtarget]')                             .each(                                 function(index) {                                     console                                         .log('triggername dentro: ' + triggername);                                     if ($(this).attr(                                             "data-navtarget") == triggername && activo) {                                         $(this).slidedown(250);                                     } else {                                         $(this).slideup(250);                                     }                                 });                     });         } else if (windowwidth > 768) {             body.removeclass(mobileclass);             body.addclass(desktopclass);             $('a[data-navtrigger]').unbind('click');         }     };      var getwindowwidth = function() {         return window.innerwidth || document.documentelement.clientwidth || document.body.clientwidth;     };      return {         init: function() {             init();         }     };  }();  $(document).ready(app.init); 

what if control these classes using css media queries? can add behaviors specified classes.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/