latentflip / loupe Goto Github PK

Dear @latentflip

A very nice tool.
Please help me provide "Fragment to fragment" exmple

Thanks

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.

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!

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

aaaaa aaa aaa aaaaaa aaaa aaa aa aaa aaaa aaa aaaaaa aaa aaa aa aa aaa aaaa aaaa:

• aaaaaaa
  • aa? -- aa aaaa aa aaaa aaaa aaaaaaaaaa aaaaaaaaaay aaaaaaa (aaaaaaaaaaaa aaaa aaa aaaaaaaa) aaa aaaa aa aaaa
    • aaa: aa
  • aa? -- aa aa aaaayaaa aaaa aaaaaaaaaaaaa aaa aaaa/aaaaaaaa aaaa aaaaaaa aaa aaaaaa?
    • aaa: aaa aaaaay aaaayaaa. a aaaaa aa aaaaaa aaaaa aa.
  • aa? -- aaa aaaaaa aaaaa aa aaaa aaaaaa aaaaa. aaa aaaa aa aaa aaaaaaaaa aaa aaaaaaa aa aaa aaaa aaaaaaa aaaa aaaa aaa aaa aaaaa. aa aa aaa aaaaaa aaaaa aaa aaaa aaaa aa aaaa aaaaaaaa aaaaaaaaaaaa aa aaaa aaaaaaa? ( aaaaa #56 )
    • aaa: aaa'a aaa aaa aaaaaa aaaaa aaaa aaa aa aaa aaaaaaa.
  • aa? -- aaa aa aaay aaaa aa aa aaaaaa aaaaaa aaaazaaa. aa aa aaay aaa aaaa aaaaa aa aaaaa aaaaaaa aa aaaa aaaaay aaaaaa/aaaaaaaaaa aa aaaaa aaaaaa
    • aaa: aaa'a aaaa aa aaa aaaa aaaaa aaa aaaaaaaaa aa aa aaaaaa.
  • [ayaa] aaaaa aaaa [ ] aaa aaaaa aaaaaa aa aaay aaaaa aaaaaaa
    • aaa: aaa'a aaaa aaa [ ] aa aaaaa aaay aaaaa aaaaaaa, aaaa aaaa aaay aa aaaaa
• aaaa aaaaa
  • aa? -- aaaa a aaaaaaa aaaaa aa aaaaaaaa aaaa aaaaaa a aaaa aaa aaaaa aaaa aaaa (a aaaaa)
    • aaa: aaa.
  • aa? -- a aaaaa aaaaaa aaaa aaa aaaa a aaaaaaa aaaaaa.
    • aaa: aaa.
  • aa? -- aaaa aaaa aaaaa aaaa aa aaaaa aaaa? (aaaaaaay)
    • aaa: aaa, aaaa a aaaa aa aaaa aa a aaaaa. aa aa aaaa aaaaa aaaaaa aa 50% aa aaa aaaaaaaa aaaaaa aa aaaa aaaa, aaaa aaa aa aaaaaa (aaaa aa aaaaa aaaaa a aaaaaaaa aa aaa aaaa aaaaa a)
  • ayaaaa aaaaaaaaaaaaa
    • aaaaaay aaaaaaa aaa aaaaaaaay ayaaaa aaaaaaaaaaaa
      • aaa: aaa aaaa aaaa aaaa aa?
    • aaay aaaaaay ayaaaa aaaaaaaaaaaa aa aaaaa aaa ayaaaa aaaaaaaaaaaa
      • aaa: aaa aaaa aaaa aaaa aa?
    • [ayaa] aayaa aaa aaaaaaa aa aaay aaa aaa aaaaaaaaaaa.
      • aaa: aaa aaaa aaaa aaaa aa?
    • [ayaa/aaaa] aaaaaaa aaa aaaaaaa
      • aaa: aaa!! :)
• aaaaaaaa aaaaa
  • aa? -- aaaaa aayaa aaa a aaaaaaaaa, aaaaa aaaaaaaaaaaa aaaaaaa aa
    • aaa: aaaa, aaa aaaa. aaa aaaay aa aaaa a aaaaaa aaa aa aaa aaaaa aaaa aaaa aaaa aaaa aa aaaa aaaaa aaaaaaaaa aaaa aaa "aaaaaaaa aaa" aaaaaaaa. aayaa aa aaaaa aa aay a aaaa-aaaa aaaaaaaaa?
  • [ayaa] "aaaa aaa" aa a aa aaa aaaaaaaaa aaaaaa aa aaaa aa aaa aaaaa
    • aaa: aaa
  • aaa aaaaaaay aaaaaaaaaaaaa aaaaaaay aaaaa aaaaaaa aaaaa aaaa aa'a aaa "ayaaaa" aaaaaaaaaaaaa aay aaaa
    • aaa: aaa aaa aaaaaaaaa aa aaa aaaaaaay aaaaaaaaaaaa aa aaa aaaaaaaa aaaa? aa yaa, a aaaaaaa aaaaa'a a aaaaaaaa aaaaaa aaaaa aaaa. aaaa aaaaaaa aaaaa.
  • aaaa a aaaaaa aa aaaaa aaa aaaaaaaa aaaaaaaaa, aaa aa aaaa aaa aaaaaaaa aaaaaaaaa aaaa aaa aaaaaa aa aaaaaaa
    • aaa: aaa
  • "aaaa aaa" aa a aaaaa aa aaaaaa aaaaaaaaa aa aaaaa aaa aa aa
    • aaa: aaa. aa aaa aaaa aaa, aa aaaaaa aaaa aaa aaa aaaa. aa aaa a aaaa aaaa aaaa aa yaa.
      @aaaaaaaaaaa aaaa aaaaaaa aaaa aaaa
  • aaaa "aaaa aaa" aaaaa aaaa aaa
• aaaaaa aaaaaaaaa
  • aa? -- aaaa aaa aaaa aa aa aa aa yaa aaaaa a aaaaaa aaaaaaaa aaaa'a aaa aa aaa aaaaaaaa aaaa?
    • aaa: aaa aaaaaa aaaaa aaaaaa aaaa aa aaa aa aaaaaaaa aaaa.
  • ay aaaaaa aaaaaaaaa aaaa a "aaaaaaa" aaaaaa
    • aaa: aaa. aaaa aaaaa aaaaa aa aa a aaaaaaa aaaaaa aaa aaaaaaaa aaaaaaaa aa aaa aaaaaaaa aaaa.
  • ay aaaaaaaaa aaaaaa aaaay aa aaaaaa, aaa aaaaa aaaaaa, aaaa aa aaaaaaaaaa aaay
    • aaa: aaa.
  • aaa aaaaa aaaaaa aaa aaaaaa aaaaaaaaa aaaaa a aaa aaaaaa aaaaaaa (aa aa aaa aaaaaaaa aaaa aa aaaaa
    • aaa: aa aaa aaaaaaaaaa.
• aaa aaaaaaaa aaaaaaaaaaaaa
  • aaaaaaaa aayaaaaa/"aa aaaa" aaaaaa aaaaa aa aaa aaaa aaaaa aaa aaaa aaaaaaaa
    • aaa: aaa
• aaaaaaaaaaa aaaaaaaaaaaaa
  • aaaa aaaaaaaa aaaa aa aaaa, aaaa aa aaaa aaaaaaaaaaaa
    • aaa: aaa
  • aaaaaaaaa aaaa aa-aaa aaaaaaaaaaaa aaaa aaa aaaaaaaa
    • aaa: a'a aaa aaaaaa aaaa aaaaaaa?
  • aaaaaaaa aaaaaa aaaaaa aaaa aaaaaaaaaaa
    • aaa: aaa
  • [ayaa] aa aaaa aaaaaaaaaaa aaaaaaaaaaaa aaaaa aayaaa
    • aaa: aaa
• aaaaaaaa aaaa aaaaaaa
  • aaaaaaaa aaaaaa aaaaaa aaaa aaaaaaaa aaaa aaaaaaa
    • aaa: aaa
  • aaaaaaaa a aaaaaaaa/aaa aaa, aaaaaa aaaa aaaa aaa.
    • aaa: aaa

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.

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

A very nice tool. It does not seem like it supports async / await, for which it would also be very useful for illustration purposes

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!

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.

Es6 is not currently supported

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.

Why cant we see the setInterval's callback function in the queue?

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 :) 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);

And in console got this error:

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'
`

Consider adding a readme to demonstrate how to build the system locally and possibly contribute to the repo.

Cannot edit code, runs only template

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?

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

README.md would be helpful. :)

Thanks.

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.

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]);
   } 
});

// 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:

1. http://latentflip.com/loupe
2. Copy/paste code snippet
3. Click 'Save + Run'

Sub tasks? Etc.?

Fails to run in Safari 8 with SyntaxError: Unexpected token ';'. Expected ')' to end a compound expression..