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.
Related
I've been trying to figure out how to fetch data from firebase and store it in a variable. The code i used works sometimes, but other times it just doesn't run. When I close and reopen it, it often doesn't run the code until i comment out different parts and run it. The parts I need to comment out seems to change every time, so I don't know what the issue is.
// Function that runs when the sign up submit button is pressed
function signup() {
console.log("signup ran");
firebase.database().ref().once("value", gotData);
}
// Snapshot function
function gotData(data) {
console.log("gotData ran");
dv = data.val()
var tempcodes = dv.verifCodes;
var codes = JSON.stringify(tempcodes);
var codelist = codes.split(",")
console.log(codelist);
var vcode = document.getElementById("verifcode").value;
if (codelist.indexOf(vcode) > -1){
console.log("valid code");
}
}
There are no error messages, and "gotData ran" is never printed to the console, while "signup ran" does.
I'm really new to firebase and still don't really understand how snapshots work in the first place, and the tutorials don't really explain it that well. Any help/advice is welcome!
Once again, though, I'd like to mention that this code works flawlessly when it's actually executing, and the only problem is that it isn't doing that. Thanks!
EDIT: So, something strange seems to be happening. I have a separate line of code adding data to the firebase that wasn't relevant, but that code still runs even when console.log doesn't. It looks like the code will affect the database, but won't run anything in the program? I really don't know what the issue is and I'm still kind of lost.
I have a really simple line of code. I have a tabstrip provided by Kendo library
i = 0;
x = 10;
while (i < x) {
var tabStrip = $("#myId").data("kendoTabStrip");
tabStrip.select(i);
i++;
}
When I go step by step using debugger everything is ok - tabStrip.select(i) method is being invoked and works perfectly. But when I run it without debugger it just behaves like there was no this line. I do not understand why, and I don't know how to solve this.
(i and x variables are just sample variables, maybe the information that the method is invoked inside the while loop is important)
var tabGroupObject = $("<div>").attr("id", "myId")
tabGroupObject = $(tabGroupObject).kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
var tabStrip = tabGroupObject.data("kendoTabStrip");
Seems to be a synchronization issue, very common in JavaScript when dealing with Ajax calls or DOM modifications. That's why it works when you execute the code step by step giving enough time for the actions to happen.
My recommendation would be to read a little about Async JavaScript and try to implement a callback function that triggers once the animation finish its task.
Assumption:- I'm assuming you are looking for an ajax trigger event which gets fired in the browser in response to the select of the tabScript.
Solution:- If that's the case please know that browsers combines all the ajax events on an element within a set amount of time into one event to reduce the number of unwanted post calls, what you can do is try adding a delay if you want these events to be called else it would simply trigger the even which gets called on the tabSctrip.select(9) as mentioned by dfsq.
I have the following JS Code which check a webpage to see if new Keys are posted on it at regular interval. Now the problem is that:
When start() is directly called from Dev Console (F12), the results are Correct and when my Function $(document).ready calls it the results are Wrong, and yes i have 100 times confirmed that no content on page is changing.
I was just curious to see if the vars are getting out of sync, so i called start() 2 times in $(document).ready, and still the wrong results but when i called satrt() from F12 (after calling it 20 times from $(document).ready, i got Correct Result.
I have confirmed that all events are waiting for each other to finsih (maybe called synchronous) and its not true that any single statement is running in a different thread.
Then how its possible that if F12 calls it, then its Correct and if $(document).ready calls it then its wrong.
A intresting point to be noted:
When i didn't had $(document).ready in my code, i called wow() from start() which also gave me wrong result, but F12 gives Correct.
Now that i have $(document).ready , if i call start() from it which inturn calls wow() gives me wrong result, but now if i call start() from my console, it gives me right result!
What i acually want to do in simpler form:
wait for page to finish loading
Call wow()
wait for wow() to finish
Reload Page
Same process continues in infinite loop.
Humble Thanks for any help, this has been wating my time for almost 5-6 hours!
JS Code : http://pastebin.com/9UJYdepU
EDIT:
Correct output:
a.js:136 Started
a.js:33 Called Wow
a.js:83 ---------------------KEY 7.0----------------
a.js:83 ---------------------KEY 7.1----------------
a.js:83 ---------------------KEY 7.2----------------
a.js:102 LAST used keys : Saab,Volvo,BMW,4E69G-8GNG4-JCZ4Z,H63HQ-VHWPX-ZCJ8J,FKZGK-MXL5C-P2YTE,4E69G-xxxxxx-JCZ4Z,4E69G-AAAxx-JCZ4Z,4E69G-AAAxx-JasasCZ4Z,4E69G-AAAxx-JasaaaasCZ4Z
a.js:140 WOWO DONW
Wrong Output:
Started
a.js:33 Called Wow
a.js:102 LAST used keys : Saab,Volvo,BMW,4E69G-8GNG4-JCZ4Z,H63HQ-VHWPX-ZCJ8J,FKZGK-MXL5C-P2YTE,4E69G-xxxxxx-JCZ4Z,4E69G-AAAxx-JCZ4Z,4E69G-AAAxx-JasasCZ4Z,4E69G-AAAxx-JasaaaasCZ4Z
a.js:140 WOWO DONW
document.getElementsByTagName("p"); Gives: http://pastebin.com/JXQ9483N
localStorage.getItem("usedp") Gives Saab,Volvo,BMW,4E69G-8GNG4-JCZ4Z,H63HQ-VHWPX-ZCJ8J,FKZGK-MXL5C-P2YTE,4E69G-xxxxxx-JCZ4Z,4E69G-AAAxx-JCZ4Z,4E69G-AAAxx-JasasCZ4Z,4E69G-AAAxx-JasaaaasCZ4Z
Finally i solved it! This was all becuase of evil Jquery (Sorry, if i hurt you).
$(document).ready was triggering when the page started loading not when it has finsihed loading, my alternate solution is:
var myVar = setInterval(function(){ chk() }, 500);
function chk(){
if(document.readyState=="complete"){
clearInterval(myVar);
startt();
}
}
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");
}
}
For some reason, IE9 is not running my JavaScript code onload when the browser is launched for the first time that session. It seems to only run onload after the user refreshes the page. It will also run the JavaScript when the debug console is open.
How do I make it so the JavaScript runs onload after the browser is open? Is this just a bug of IE9?
I'll restate this so you understand: The code DOESN'T run if you go to the site after launching a new browser session. The code DOES run if you open the site in a new tab, or reload the page, or open the debug console
Here is the function I use to run my script onload (which works fine in NORMAL browsers):
(function (i) {
var u = navigator.userAgent;
var e = /*#cc_on!#*/
false;
var st = setTimeout;
if (/webkit/i.test(u)) {
st(function () {
var dr = document.readyState;
if (dr == "loaded" || dr == "complete") {
i()
} else {
st(arguments.callee, 10);
}
}, 10);
} else if ((/mozilla/i.test(u) && !/(compati)/.test(u)) || (/opera/i.test(u))) {
document.addEventListener("DOMContentLoaded", i, false);
} else if (e) {
(function () {
var t = document.createElement('doc:rdy');
try {
t.doScroll('left');
i();
t = null;
} catch (e) {
st(arguments.callee, 0);
}
})();
} else {
window.onload = i;
}
})(init); //init is the function to call onload
I had the exact same issue that you had. I had a set of images that I wanted to ensure were preloaded before I began starting a slideshow. I was making use of
$(window).load(function(){
//All my code
});
And this is exactly what I was facing.
When I copied and pasted the URL in IE, the onload event did not seem to fire.
If I open the console using F12 and then past the URL in the browser and pressed enter, the everything seemed to be working.
Now that I opened the console at least once,
If I closeed the console and then reloaded the page, the onload was firing.
If I typed the URL and then pressed enter, the onload was firing.
It took me a couple of days to actually figure out what I was doing wrong.
The issue was with the console.log statements. At a lot of places in my code, I had done a lot of console logging. Even one of the plugins that I was using - jplayer has a an uncommented console message somewhere in the code.
The issue was that, unless you open the console at least once in IE, the console object is not available. Which means that the code will fail at the first console.log that it encounters.
Now, I was in no mood to comment out all my console.log statements just for the sake of testing it in IE. So, this is what I did instead. Right at the top of my document.ready jquery function, I wrote this small snippet of code.
if(!window.console){
console={};
console.log = function(){};
}
What it basically does is creates a dummy console.log function placeholder so that the code can run in IE but it will work only as long as console.log is the only console function that you are making use of in your code or in your plugins.
Just my 2 cents. Been pulling my hair over this issue for longer than I care to admit. I hope this is useful to at least someone.
You need to figure out if the code doesn't run at all, I.e. never enters your function, or if it fails on some specific line inside your function. Does IE9 show any warnings or js errors?
The easiest thing to do is stick a bunch of alert() statements in the code to see where it stops and narrow down to that line.
If it never enters your function then you need to look higher, where the call is being made.
Just a small note; When you use any debugging keywords (like console.log) or anything related, IE9 will escape this JS function if and only if the debugger is not on (with F12)
Actually I don't know what else cause a problem, but for me, my problem was the word "console.log" while debugger not on in IE9 ... I know this is already an answered question, but I felt it needs to be be known.
Okay, I figured it out. It has to do with some weird way IE handles IF statements.
In my init function I had two IF statements, one which checked if a variable existed and then logged the value of that variable. The other which checked to see if the value of the same variable was equal to an arbitrary string.
After removing the first IF statement, everything seems to work properly. I also decided to use a different onload function which can be seen below:
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, true);
} else if (document.all && !window.opera){ //Crude test for IE
//Define a "blank" external JavaScript tag
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag=document.getElementById("contentloadtag");
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete") {
init();
//ie('open');
}
}
}