Understanding Javascript asynchronous setInterval in canvas -

-

the following code creates canvas ball @ centre when init() method invoked using setinterval. when keydown() event fired ball moves on x , y axis (depending on key user has pressed). struggle understand happens when key pressed.

does setinterval stop when key pressed update key value (keyleft, keyright, etc) , resumes , takes updated values consideration

or

does code inside key event execute while setinterval in progress?

i 've read setinterval asynchronous while key events synchronous , since javascript single threaded second option can't true, right? use knowledge on one..

    <canvas id="canvas" style="border: 1px solid black" width="400" height="400"></canvas>     <script type="text/javascript" src="jquery.js"></script>     <script type="text/javascript">         var ball = {             positionx: 200,             positiony: 200,             keyleft: false,             keyright: false,             keyup: false,             keydown: false,             init: function() {                 this.canvas = document.getelementbyid('canvas');                 this.ctx = this.canvas.getcontext('2d');                 setinterval(ball.draw, 10);             },             circle: function (x, y, fill) {                 this.ctx.beginpath();                 this.ctx.arc(x, y, 20, 0, math.pi * 2, false);                 if (fill) {                     this.ctx.fill();                 } else {                     this.ctx.stroke();                 }             },             draw: function() {                 ball.ctx.clearrect(0, 0, 400, 400);                 if (ball.keyleft) ball.positionx -= 5;                 else if (ball.keyright) ball.positionx += 5;                 if (ball.keyup) ball.positiony -= 5;                 else if (ball.keydown) ball.positiony += 5;                 ball.circle(ball.positionx, ball.positiony, true);             }         }         ball.init();          $('body').keydown(function (e) {             var key = e.keycode;             if (key == 37) {                 ball.keyleft = true;             } else if (key == 39) {                 ball.keyright = true;             }              if (key == 38) {                 ball.keyup = true;             } else if (key == 40) {                 ball.keydown = true;             }         });     </script>

javascript (in browsers) event-driven language. of time, nothing being executed. when event occurs , script has registered listener particular type of event, event placed queue. if part of script being executed, not interrupted - rather, when completes, browser pull next event queue , start executing registered handler it.

in code, registering 2 kinds of events: timer events (implicitly, using setinterval) , keydown events (explicitly, using jquery, uses addeventlistener). when timer event fires, ball.draw method executed. if keydown event arrives while running, waits in queue until ball.draw finishes. dispatched handler function assigned. , vice versa: if keydown handler in progress, 10 milliseconds pass, , timer event occurs, timer event has wait until keydown handler completes. 1 reason why javascript timers inherently imprecise.

short version: keydown handler can execute in between executions of ball.draw. changes makes variables used both functions visible ball.draw on next invocation.


Comments

Post a Comment

Popular posts from this blog

node.js - How to mock a third-party api calls in the backend -

-
i'm testing application mocha , supertest, test like var request = require('supertest'), app = require('./bootstrap.js'); describe('...', function() { it('...', function() { request(app) .get('/some/url') // ... }); }); the bootstrap.js real application before listen ports all works perfect have add calls third-party api , testing slow so when do, test example takes 5 seconds request(app) .get('/my/endpoint/that/makes/call/others') // ... how can make fake calls during test real when running application? you can use nock purpose.
Read more

node.js - Why do I get "SOCKS connection failed. Connection not allowed by ruleset" for some .onion sites? -

-
i'm experimenting node , socks5-https-client . reason, tor hidden service ( .onion ) sites return connection error. for example, connecting duckduckgo ( 3g2upl4pq6kufc4m.onion ) works , returns html. however, connecting pirate bay ( uj3wazyk5u4hnvtk.onion ) or torch ( xmh57jrzrnw6insl.onion ) returns... error: socks connection failed. connection not allowed ruleset. what error mean? how can avoid it? here's code reproduce it: var shttps = require('socks5-https-client'); shttps.get({ hostname: '3g2upl4pq6kufc4m.onion', path: '', sockshost: '127.0.0.1', socksport: 9150, rejectunauthorized: false }, function(res) { res.setencoding('utf8'); res.on('readable', function() { console.log(res.read()); // log response console. }); }); the error seems caused 0x02 value in field 2 of server response. in summary the servers you're failing access don't support ...
Read more

java - Cannot resolve constructor when using ArrayAdapter -

-
i'm getting myself in muddle arrayadapter i'm trying put together. i've got constructor, person, used put people go in list. i'm putting arraylist of type person make readable list. i put arrayadapter list can seen in listview, i'm getting "cannot resolve constructor" code. i've tried countless possible solutions on site including trying use getactivity() or in place of peopleactivity.this, cannot code compile. i've tried referencing constructor class in arrayadapter, gives me error it's not enclosing class. person.class (constructor) import android.text.editable; public class person { public person person; private editable personname; public person(editable a) { personname = a; } public void setname(editable personname){ this.personname = personname; } public editable getname() { return personname; } } peopleactivity - populatelistview arraylist<person> peoplelistv = new arraylist<person>(); ... ...
Read more