We Keep Coding

Firebase's Realtime Database's event listener's handler executes itself infinitely

I found next executing itself infinitely. I think this is an abstraction of my code that replicates the problem:
function next() {
game.set(newObj)
}
game.child(`user1`).orderByKey().on(`value`, next);
The solution was to insert a remove the event listener:
game.child(`user1`).orderByKey().off() //new
function next() {
game.set(newObj)
}
game.child(`user1`).orderByKey().on(`value`, next);
My initial understanding was ref.orderByKey().on('value', ...) executed its handler once. Is there anything you can see here that explains why the handler executed infinitely?
If not, perhaps another piece of code was responsible - like one of the child_changed event listeners I have. My child_changed listeners all listen for a change in various parts of game. Surely updating game to a new object would trigger them. However, none of their callbacks are next so I think they don't play a role in retriggering next.

My initial understanding was ref.orderByKey().on('value', ...) executed its handler once. Is there anything you can see here that explains why the handler executed infinitely?
No, that's exactly the way it's supposed to work. A listener attached using on() will be invoked every time the data is seen to change. It will continue to do so until the listener is removed. To do that, you must call off() after you call on().
If you want to execute a query just once, use once() instead of on().

I do not understand Using addEventListener javascript

Hello am really stuck on getting more information on addEventListener can someone please point me to the right direction, I will like to get some more information on what type of argument can be passed into a function parameter is their a website or a link that i can view for all available javascript function and tell me what a parameter takes. in the below eg eventOne.addEventListener() is called however this code taken else where and am unsure why the argument are passed into the parameter and why a function with no name given
var eventOne = document.querySelector("h1")
eventOne.addEventListener("mouseover", function () {
eventOne.textContent = 'mouse over'
})

Anytime you interact with a browser window an event fires. The addEventListener method listens for any event you tell it to. The idea behind this method is basically you telling your browser: Hey, when this thing happens to this element, please execute this code.
Here is a link to all the events you can listen for.
The addEventListener method takes two arguments:
The first argument is the event you want to listen for. The code example listening for a mouseover event. According to the events reference this event fires off when a pointing device is moved onto the element that has the listener attached or onto one of its children.
The second argument is a callback function. This is the function that will execute when that event fires off on that DOM element.
Here is a more common example:
const heading = document.querySelector('h1');
heading.addEventListener('click', function () {
console.log("I have clicked the h1 tag")
})
You can use this tactic to implement logic into your code when certain events happen. It is very powerful.

Let me briefly try to explain ... before I ask you to simply "google it" and start reading.
"When things happen," such as when the mouse-pointer moves over something, an "event" is sent to the thing that it happened to ... and it "bubbles up" from there. Of course you cannot predict when these events will happen, but you can "listen" for them.
When an event is "listened to," what happens is that the specified function() will be called at that time, with various optional parameters. (Furthermore, there's some additional "JavaScript voodoo magic" that can happen -- Google the term, "closure.")
So, when the mouse passes over this object, the specified function will be called at that time, and it will change the textContent as shown.
Now ... "off to Google-land!" There are literally thousands of articles on the Internet which explain this much better than I did. (May I recommend: "w3schools.com." There, you can actually "try things out!")

Javascript: Synchronize observable events

I am using Ionic2 with Meteor. I observe a Cursor, for when it gets added to or updated.
public messages: Mongo.Cursor<Message>;
this.messages.observe({
added: (message) => this.addMessageToLocal(message),
changed: (message) => this.updateMessageToLocal(message)
});
In my case, the added event gets triggered before the changed event. However, they run asynchronously. I would like the event that is triggered first (added) to finish before the next event (changed) starts.
Is this possible?
Thank you
UPDATE
I am thinking of maintaining a flag, that says when one job is busy, and the other one must wait until it is finished. Is this advisable?

In the asynchronous world of javascript you cannot control (much as you would like to) the order of execution.
There are two ways to deal with this
1) Get used to it, and write your code accordingly
2) Do the first thing, and then start the second thing in the callback response for the first thing (although in this case I don't think you can)

What the difference between `onmessage` and `.addEventListener`?

I'm trying to get data with server-sent event, what the different using
source.onmessage vs source.addEventListener?

source.onmessage is the built in function wrapper for EventSource that is triggered when new data is sent to the client. It fires when no event attribute is returned (default) and doesn't fire when it is set.
addEventListener is similar, but differs in that it listens for a specific event name, and triggers on its presence, allowing you to separate your functionality for multiple events. You can then parse the JSON data returned. It can be used on any event type. Have a look at this example:
source.addEventListener("login", function(e) {
// do your login specific logic
var returnedData = JSON.parse(e);
console.log(returnedData);
}, false);
This snippet will listen for a server message with event specified as login, then it triggers the callback function.
More info:
https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events
http://html5doctor.com/server-sent-events/

I assume you're talking about addEventListener('message') vs onmessage. They do the same thing, but I'd recommend using onmessage because with addEventListener, there's always a possibility of unexpectedly adding the same listener twice, e.g. due to a laggy page reload, or some hot-reload during development. In those cases the handler function could fire twice on every event, which leads to weird behaviors.

How can one simulate events triggered on load when adding javascript to a page through the browser's console?

I'm currently working on a script to be placed on a 3rd-party site...in order to test it I'm opening the 3rd party's site and running the script in the browser's console (Chrome). Some code I need to executed on window.load(), but that code isn't being executed with this method of testing. I'm assuming it's because the code bound by load to the window is being bound after the load event has taken place, thus never being triggered. My question has two parts:
Is the reason that window.load is not being triggered in fact because it's being added after the load event has been triggered? Or is this wrong and there is likely a problem elsewhere?
How best can one simulate events triggered on load when appending javascript through the console like this?

if(document.readyState === "complete"){ will detect if the load is already complete.
You could easily use an else and then put in the load event handler if it hasn't finished loading yet. Something along the lines of:
if(document.readyState === "complete"){
// do stuff
}else{
// attach load handler
}
What I like to do is define a pageLoaded type function that I can run at a later point with my code, that way I can call it immediately if the page is already loaded, or let the load handler call it when the page load does fire. Something like:
var pageLoaded = function(){alert("Page is ready!");}
if(document.readyState === "complete"){
pageLoaded()
}else{
// attach load handler, calls pageLoaded()
}
Of course, since you tagged your question as jQuery you could always just wrap all your code in jQuery's handy dandy ready function shorthand:
$(function(){
// do stuff
});
This passes your anonymous function to jQuery where it will do something very similar if not identical to the above vanilla javascript.

Define your event in a function and then call that function from the console.
function do_this_on_load() { alert("Loaded!") }
$(window).load(do_this_on_load);
Then you can from the console run:
do_this_on_load();
to see what it does on the page.