Lawnchair code executing twice - javascript

I am trying to use Lawnchair and have found that it seems to execute all functions twice. This may be just something I am doing wrong with JavaScript in general. Here is and example that does nothing other than demonstrate my problem.
console.log("Flag 1");
Lawnchair(function() {
console.log("Flag 2");
});
In this example the console shows this.
Flag 1
Flag 2
Flag 2
So while the whole section of code is only getting called once, the inner function is indeed getting called twice.
Is this a syntax problem?

Related

Make Jquery take a short break

Im trying to make my program just chill out for 3 sekunds and then proceed with the rest of the code - but all the stuff i can finde online just delays specifit lines of code (any way not what i was looking for)
What i wish to do is something like this
$("#one").attr("id","H1");
$("#line1").attr("id","line2");
setTimeout(3000);
$("#line2").attr("id","line1");
$("#H1").attr("id","two");
And it should just chillout for 3 sekunds where i have placed the settimeout(3000); but can make it work ? im i missing something obvious ?
Thanks alot ! :D
setTimeout() takes a function, then the delay:
setTimeout(function() {
$("#line2").attr("id","line1");
$("#H1").attr("id","two");
}, 3000);
Note that setTimeout() delays what's inside this function.
setTimeout() does not block the execution of the rest of your code,
so the following code would do exactly what console.log() says:
console.log("I log first!");
setTimeout(function() {
console.log("I log third!");
},1000);
console.log("I log second!");
Normally when someone wants JavaScript, which is a single-thread event-based model, to sleep, they do not quite understand the language.
You are not supposed to block code. Instead, you should make use of callbacks, event triggers or Promises to run dependent code when you have the dependencies.
Please read through this entire question so that you understand better what it is you are trying to do, and then decide which action to take.

Why won't javascript run one function if there is an error in the other function?

Why won't a JavaScript function run if there is an error in another function?
I ran this html page and tried to load the alert from the popup1() function, but it wouldn't work because there is an error in the if statement of the popup2() function:
<html>
<body>
<button onclick="popup1()"> Pop up 1 </button>
<button onclick="popup2()"> Pop up 2 </button>
<script>
function popup1()
{
alert ("Pop up 1");
}
function popup2()
{
if ( 1 = 1)
{
alert ("Pop up 2");
}
}
</script>
</body>
</html>
When I corrected the if statement to if (1 == 1), both functions worked.
Why did this affect the other function?
Is there any free software you can recommend that will find syntax errors in JavaScript for me, I really don't want to trawl through code again because of a missing equal sign. I tried eclipse for php but it didn't manage to find this.
Javascript runs in blocking sequence, so if there is any error anywhere it will stop execution.
(this is assuming you have no asynchronous function callbacks that started before the error happened)
The line of code if ( 1 = 1) is a parse error in Javascript. When your code fails to parse properly, the Javascript parser stops parsing your code immediately and that script is considered to have a fatal error and is not loaded.
At that point, it has found illegal Javascript and at best the parser has decided this is a fatal error and at worst, the parser is hopelessly confused about what your code would have meant and cannot proceed. In any case, this is how the Javascript parser works. It stops on the first parse error it encounters within any given script.
Your specific error would have been shown to you in the Javascript console as soon as you loaded that page. Your FIRST line of defense should be to keep your eye on the debug console. You should watch it regular, but ALWAYS look there whenever anything is not working as you expect.
In Chrome, it would have told you:
Uncaught ReferenceError: Invalid left-hand side in assignment
In addition, you can run various "lint" type programs on your code and it will advise you not only about errors, but also about dangerous practices. Personally, I use http://jshint.com/, but there are several different programs that offer this capability.
this error is because a number can not be redeclare, since a number always going to be the same number.
This causes a syntax error and affects the rest of the code. if you try to make this example work without problems.
function popup2()
{
var number = 1;
if ( number = 1)
{
alert ("Pop up 2");
}
}

wirecloud / fiware "Not registered callback" although callback function is implemented

I made a widget for the filab and everytime it gets executed it shows me the following error:
I got that error a few times before, it always was a syntax error in my code.
But by now ( I think they updated the filab last days) the filab catches this errors, too, and shows where the error is.So this time there must be another problem.
Does somebody else got such a problem and knows how to solve it?
Code in main.js
the callback function is implemented in the main.js, too.
Code in config.xml
WireCloud is complaining about an input endpoint identified as "INPUT2", while you are providing us the code you use for registering "INPUT1".
There is another strange thing, you are registering the callback using this line:
MashupPlatform.wiring.registerCallback("INPUT1", callback(this));
I'm guessing the correct line is:
MashupPlatform.wiring.registerCallback("INPUT2", callback);
Or:
MashupPlatform.wiring.registerCallback("INPUT2", callback.bind(this));

Stopping interval at syntax error doen't work

I have built my own javascript console in a website! Pressing the GO - Button runs the following function, after comments are removed from the code:
var interv;
function go(code) {
code += "clearInterval(interv);";
interv = setInterval(code,1);
}
My problem appears when calling very time-consuming functions or when there's a mistake in the code: it doesn't stop, sometimes even the browser crashes.
What have I done wrong? Or is there a better way to get the same result?
Here's a JSFiddle (it works best in Firefox)
PS: Maybe you like the spirograph function in this jsFiddle. It's similar to a function in this website, but better.

These functions appear to be being executed out of order

The strangest thing just happened to me. I have some javascript that appears to be being executed in the wrong order. This is freaking me out! Observe:
the code
handleKeyDown: function (e) {
console.log("handleKeyDown");
var key = e.which;
var text = this.ui.$input.val();
if (_.isFunction(this[key])) {
// call the appropriate handler method
this[key](text, e);
console.log("before announceEdits");
this.announceEdits();
}
if (key === ENTER || key === ESC) {
console.log("fired field:key:down");
this.trigger("field:key:down", { editable: this, restore: (key === ESC) });
}
},
announceEdits: function () {
console.log("announceEdits");
var edits = this.getEdits();
console.log("edits: %o", edits.data);
console.log("fired field:edits");
this.trigger("field:edits", edits);
},
/* gather all the existing taggies */
getEdits: function () {
var data = this.$taggies().map(function (index, taggy) {
return $(taggy).data("value");
}).toArray();
var edits = {
attribute: "tags",
data: data
};
return edits;
},
When I run this code, the functions appear to be being executed out of order. This is the output in firefox's console of the above code:
the output
Notice that we get before announceEdits long before we get announceEdits, which is the first line in the annouceEdits function... my understanding of the world leads me to believe this is wrong.
what I've done
Now, I have considered the following:
The console statements could be being buffered or some such, causing them to appear out of order.
This could have something to do with the way MarionetteJS handles events.
Believing that this might be evented weirdness, I tried removing the calls to trigger (just by commenting out the lines that trigger the events). After removing the triggers, the log statements still appear out of order. So it doesn't seem to be cause by MarionetteJS's implementation of events (which is to say, BackboneJS's implementation of events ^o^//).
I'm also lead to believe that this isn't a log statement buffer issue, because the events are themselves handled out of order (i.e. the data I expect to have after the handling of the first event is not in order by the time the second event is handled). This causes the code to "not work" in the way I would like (however, see below).
In my explorations, I've tried to narrow things down a bit. I modified the code thusly, in order to simplify the code:
if (_.isFunction(this[key])) {
// call the appropriate handler method
this[key](text, e);
console.log("before announceEdits");
console.log("announceEdits");
var edits = this.getEdits();
console.log("edits: %o", edits.data);
console.log("fired field:edits");
this.trigger("field:edits", edits);
}
This way I am not descending into a subroutine. Running this code, the console statements appear in the right order. What's more interesting is that, in this case, the events are also fired and handled in the order I expect! This code works, but the one with the subroutine doesn't.
I tried to create a fiddle of this code, but jsfiddle doesn't appear to like Backbone (I tried including the library as an external library, but that didn't seem to work). I did create this fiddle, just to reassure myself that somewhere in the world there is still a rock of normality.
update: I changed the fiddle so that the main function is itself a handler. Everything still works fine in the fiddle.
how I thought the world worked
Functions create stack-frames that execute to completion. If a function calls another function, a new stack-frame is pushed to the stack. If a function triggers an event, it creates a message, which is pushed onto a message queue. Whenever (and I'm unclear on this) the stack is empty, the next message in the queue is popped off, and all handlers for this message are then invoked.
In this model, without question, the events should happen in the order that I expect (the order from the second listing). We should first descend into announceEdits, push the field:edits message to the queue, and then pop back out and push the field:key:down message. Then the handlers for field:edits should run, and finally those for field:key:down.
the question
Is there anything that could be causing these functions to be being executed out of order? Or more likely: is there anything that could be causing these functions to appear to be being executed out of order?
If this is a problem with my understanding: where did I go wrong?
If this ends up being something that was caused by a typo, please bear in mind that we are all programmers, and that we have all torn out hair and bellowed at shadows at times.
lesson
Sleep on it. In the heat of the moment, every bug is a mysterious force from another world. Step back from the problem, start from the beginning. Everything will become clear.
I came in this morning, put a debugger at the beginning of handleKeyDown and immediately saw what was wrong. It isn't in the code I gave above, naturally, and it isn't a problem with how javascript works (clearly!). I had wrapped announceEdits in a debounce earlier, to relieve a head-ache I had been having.
Good news is, my understanding of how event handling works does not appear to be in question.

Categories