jQuery event looping

Question

I'm looking for a way to shrink this down. It'not anything special or unique but I feel the repetitive nature of the code could lend itself to a sleeker and more functional refactoring.

$.e = {
    doc: { ready:[], custom:[] },
    win: { scroll:[], scrollstart:[], scrollstop:[], load:[], resize:[], resizestart:[], resizestop:[], orientationchange:[] }
};


$(window).on({
    load:function(){for(var i = 0; i < $.e.win.load.length; i++){ $.e.win.load[i](); }},
    scroll:function(){for(var i = 0; i < $.e.win.scroll.length; i++){ $.e.win.scroll[i](); }},
    scrollstart:function(){for(var i = 0; i < $.e.win.scrollstart.length; i++){ $.e.win.scrollstart[i](); }},
    scrollstop:function(){for(var i = 0; i < $.e.win.scrollstop.length; i++){ $.e.win.scrollstop[i](); }},
    resize:function(){for(var i = 0; i < $.e.win.resize.length; i++){ $.e.win.resize[i](); }},
    resizestart:function(){for(var i = 0; i < $.e.win.resizestart.length; i++){ $.e.win.resizestart[i](); }},
    resizestop:function(){for(var i = 0; i < $.e.win.resizestop.length; i++){ $.e.win.resizestop[i](); }},
    orientationchange:function(){for(var i = 0; i < $.e.win.orientationchange.length; i++){ $.e.win.orientationchange[i](); }}
});

$.e is a custom object that houses the arrays for the custom events. I've edited the posting to show more. ------------- *NOTE: The reason for this custom $.e is because the admin dashboard I am working in is riddled with dom.ready, window.load and win.resize events I needed a way to separate and organize the previous logic from the refactored logic. — googabeast
– googabeast, Commented Jul 8, 2017 at 14:15
Took the solution below... added a concept that combines the concepts. — googabeast
– googabeast, Commented Jul 8, 2017 at 21:10
Please do not update the code in your question to incorporate feedback from answers, doing so goes against the Question + Answer style of Code Review. This is not a forum where you should keep the most updated version in your question. Please see what you may and may not do after receiving answers. — Simon Forsberg
– Simon Forsberg, Commented Jul 8, 2017 at 22:55
$.each($.e.win, function(_k,_v){ $(window).on(_k, function(){ for(var i = 0; i < $.e.win[_k].length; i++){ $.e.win[_k][i](); }; }) }); — googabeast
– googabeast, Commented Jul 9, 2017 at 16:42

woxxom · Accepted Answer · 2017-07-08 14:22:39Z

1

Use one event listener that propagates the event.
The correct collection of listeners in $.e.win is selected with event.type.

$.each($.e.win, function(eventName) {
  $(window).on(eventName, propagateEvent);
});

function propagateEvent(event) {
  var listeners = $.e.win[event.type];
  for (var i = 0; i < listeners.length; i++) {
    listeners[i].call(this, event);
  }
}

edited Jul 8, 2017 at 14:22

answered Jul 8, 2017 at 10:11

woxxom

2,0021 gold badge10 silver badges12 bronze badges

\$\begingroup\$ Nice approach, the events are defined as an array at the beginning of the document as a $.e variable. \$\endgroup\$

googabeast
– googabeast

2017-07-08 14:14:04 +00:00
Commented Jul 8, 2017 at 14:14
\$\begingroup\$ @googabeast, in that case the event subscription may be shortened, see the updated answer. \$\endgroup\$

woxxom
– woxxom

2017-07-08 14:19:39 +00:00
Commented Jul 8, 2017 at 14:19
\$\begingroup\$ I was also thinking of the same solution. Why not use each instead of for?. \$\endgroup\$

Tushar
– Tushar

2017-07-08 14:24:11 +00:00
Commented Jul 8, 2017 at 14:24
\$\begingroup\$ @Tushar, because without ES2015 arrow syntax there's no gain in clarity \$\endgroup\$

woxxom
– woxxom

2017-07-08 14:41:34 +00:00
Commented Jul 8, 2017 at 14:41

Add a comment |

Stack Exchange Network

jQuery event looping

1 Answer 1

You must log in to answer this question.

Hot Network Questions

jQuery event looping

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions