latentflip / loupe Goto Github PK
View Code? Open in Web Editor NEWVisualizing the javascript runtime at runtime
Home Page: http://latentflip.com/loupe
Visualizing the javascript runtime at runtime
Home Page: http://latentflip.com/loupe
Why cant we see the setInterval's callback function in the queue?
Es6 is not currently supported
This is not a a ISSUE report. just a question regarding event loop implementation in this application
Hi,
first of thanks for explaining eventloop. helped me alot in understanding it properly
here is a simple link to my problem http://latentflip.com/loupe/?code=Zm9yICh2YXIgaSA9IDA7aTwxMDA7aSsrKXsKICAgIHZhciB4ID0gaSoyOwogICAgdmFyIHogPSB4ICsgaQp9!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D
according to this every instruction like x = x+1
will be sent to call stack where it will be executed and then removed from the stack.
i had a great discussion with my CTO he said that no way every instruction can go to the call stack. it will very inefficient way to execute every instruction by sending it to stack and executing it there .
there are multiple operations in stack like push, pop, keeping the pointer of current, next etc.
and his argument was only function references can go to call stack and the execution of instructions in those functions is simply done by interpreter line by line. without moving to the call stack.
MDN says
A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.
Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.
When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.
If the stack takes up more space than it had assigned to it, it results in a "stack overflow" error.
https://developer.mozilla.org/en-US/docs/Glossary/Call_stack
i searched alot on how instructions are executed in callstack but didnt get any suitable answer. everyone talks about functions only.
but in this application each and every instruction goes to callstack.
can you pls explain where exactly is each instruction is executed and where functions are executed
I tried to run this code, it only runs the first line then nothing...
console.log('1st line');
const promise1 = new Promise((resolve, reject) => {
resolve('Promise1 resolved');
});
promise1.then((result, err) => {
console.log(result);
});
console.log('last line');
Note: it works fine on chrome.
This is my code.
`
//#Source https://www.30secondsofcode.org/js/s/array-to-csv
//#License https://creativecommons.org/licenses/by/4.0/
const arrTOcvs = ( arr, delimiter = ',' ) =>
arr
.map( v =>
v.map( x => ( isNaN( x ) ? "${ x.replace( /"/g, '""' ) }"
: x ) ).join( delimiter )
)
.join( '\n' );
console.log( arrTOcvs( [ [ 'a', 'b' ], [ 'c', 'd' ] ] ) ); // '"a","b"\n"c","d"'
console.log(arrTOcvs( [ [ 'a', 'b' ], [ 'c', 'd' ] ], ';' ) ); // '"a";"b"\n"c";"d"'
console.log(arrTOcvs( [ [ 'a', '"b" great' ], [ 'c', 3.1415 ] ] ) ); // '"a","""b"" great"\n"c",3.1415'
`
When I try to reference document
or window
or to use $
selectors I get error messages that these objects are undefined. How can I manipulate DOM?
My ultimate goal is to demonstrate how events work in capture/target/bubble phases, and to attach handlers for visualization.
// Code Snippet
console.log('A');
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 5000);
console.log('D');
The default code snippet seems to get executed instead of the one i'm pasting in...
Steps to reproduce:
Sub tasks? Etc.?
So I tried to edit the sample code to my code, but every time I click Save+Run, it shows the sample code execution processes instead of my code. I tried to use old function expressions instead of arrow functions, tried to remove async-await functions, but neither of them works.
Fails to run in Safari 8 with SyntaxError: Unexpected token ';'. Expected ')' to end a compound expression.
.
console.log("first call");
setTimeout(function cp1() {
console.log("second call");
}, 1000);
setTimeout(function cp2() {
console.log("third call");
}, 0);
console.log("fourth call");
I have tried this code in the console and it's giving me different results from the one in loupe
Chrome Console:
first call
fourth call
third call
second call
Loupe Console:
first call
fourth call
second call
third call
Hi @latentflip, I really like the tool and find it really useful, as I am learning js.
I tried this code in chrome and opera:
function greaterThan(n) {
return m => m > n;
}
let greaterThan10 = greaterThan(10);
console.log(greaterThan10);
console.log(greaterThan10(11));
// → true
the behavior is weird, I copied the new code and instead of runing the new code, it runs the default (old) code:
Hi there!
I'm giving a talk on async await and I'd love to use this tool. I'm wondering what it would take to make this tool support generators. I'd be interested in submitting a PR if I have time. Any advice you have on a starting point would be amazing.
Esprima says that its fully es6 compatible which is encouraging.
This code will give wrong results! not only setInterval issues but it will run f1 before f4!
setTimeout(function f1(){console.log(1)}, 500);
console.log(2);
var intId = setInterval(function f3(){console.log(3)}, 0);
setTimeout(function f4(){console.log(4)}, 0);
console.log(5);
clearInterval(intId);
Based on Philip explanation, setInterval will at least push a callback function f3() to the queue at least once (async) before the clearInterval clear it from the WebAPI, but in real browser f3 will never run, so basically WebAPI will not start working on what we push to it until we finish the Stack!
Hi :) I think app have some problems with IIFE.
When I try this example, app had stop.
console.log(1);
setTimeout((function two() {
console.log('lol');
return function nested() {
console.log(2);
}
})(), 1000);
setTimeout(function three() { console.log(3) }, 0);
console.log(4);
Have you considered a license for this project? It could be interesting to build on what you've done here to explain other programming concepts as well, but I'm not sure how your stance is on others using what you've built here.
As it is written in the MDN's article: When the stack is empty, a message is taken out of the queue and processed.
But I've noticed strange thing which I don't understand.
For example:
function f() {
console.log("foo");
setTimeout(g, 0);
console.log("foo again");
}
function g() {
console.log("bar");
}
function b() {
console.log("bye");
}
f();
/*<---- Why the stack is not empty here, after f() function removing from stack? */
b();
Output is next and it is correct order:
foo
foo again
bye
bar
But why the g()
function in setTimeout
runs only after b()
function despite the fact that call stack is empty? Or it's not? In your demo it's empty
Another example based on thoughts from previous:
So can I presume that if I have a Promise
it means that .then()
part with resolve or error will run only after all synchronous code will finish because it won't be added to the call stack from callback queue because it's not empty? Or it is?
That's why I have a question: when exactly call stack becomes fully empty?
aaaaa aaa aaa aaaaaa aaaa aaa aa aaa aaaa aaa aaaaaa aaa aaa aa aa aaa aaaa aaaa:
console.log('first call');
setTimeout(function timeout() {
console.log("second call");
}, 5000);
alert('a')
setTimeout(function tim() {
console.log("second scoend call");
}, 2000);
console.log("third call");
Note: alert call is still in stack but then event loop kicks in and execute timeout
Hello:
Just wondering if it is possible to support microtask and macrotask in the future, cause right now it seems only support the setTimeout tasks(macrotask), would be appreciate if you differentiate microtask and macrotask in the callback queue.
Cheers!
Cannot edit code, runs only template
README.md would be helpful. :)
Thanks.
Consider adding a readme to demonstrate how to build the system locally and possibly contribute to the repo.
Following code Logs All the 5 logs on console even I click the Text in 4 seconds. But it works fine in my real code. I am not sure it is bug or I did something wrong. My main aim is to clear the timeout when some event happend. in between.
function timeout() {
console.log("Click the button!");
}
var arr = [];
$.on('button','click', function onClick() {
for(let i = 2000;i<12000;i+=2000)
{
arr.push(setTimeout(timeout, i,this));
}
});
$.on('text','click', function onClick() {
for(let i = 0;i<arr.length;i++)
{
clearTimeout(arr[i]);
}
});
A very nice tool. It does not seem like it supports async / await, for which it would also be very useful for illustration purposes
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.