Files
timers
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
parent directory.. | ||||
<!DOCTYPE HTML>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<title>Timers | Javascript Challenges</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="">
<meta name="generator" content="GitBook 1.5.0">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="../undefined_values_in_array/README.html" />
<link rel="prev" href="../terminator/README.html" />
</head>
<body>
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-exercises/exercises.css">
<div class="book" data-level="0.27" data-basepath=".." data-revision="1498683876884">
<div class="book-summary">
<div class="book-search">
<input type="text" placeholder="Type to search" class="form-control" />
</div>
<ul class="summary">
<li class="chapter " data-level="0" data-path="index.html">
<a href="../index.html">
<i class="fa fa-check"></i>
Intro
</a>
<ul class="articles">
<li class="chapter " data-level="0.1" data-path="autoexecute/README.html">
<a href="../autoexecute/README.html">
<i class="fa fa-check"></i>
<b>0.1.</b>
Self Invoking Functions
</a>
</li>
<li class="chapter " data-level="0.2" data-path="banking/README.html">
<a href="../banking/README.html">
<i class="fa fa-check"></i>
<b>0.2.</b>
Floats Operations Imprecision
</a>
</li>
<li class="chapter " data-level="0.3" data-path="hoisting1/README.html">
<a href="../hoisting1/README.html">
<i class="fa fa-check"></i>
<b>0.3.</b>
Hoisting and Conditionals
</a>
</li>
<li class="chapter " data-level="0.4" data-path="objects1/README.html">
<a href="../objects1/README.html">
<i class="fa fa-check"></i>
<b>0.4.</b>
Checking Properties
</a>
</li>
<li class="chapter " data-level="0.5" data-path="objects2/README.html">
<a href="../objects2/README.html">
<i class="fa fa-check"></i>
<b>0.5.</b>
Closure and Objects
</a>
</li>
<li class="chapter " data-level="0.6" data-path="conditionals_functions/README.html">
<a href="../conditionals_functions/README.html">
<i class="fa fa-check"></i>
<b>0.6.</b>
Conditionals and Functions
</a>
</li>
<li class="chapter " data-level="0.7" data-path="delete/README.html">
<a href="../delete/README.html">
<i class="fa fa-check"></i>
<b>0.7.</b>
Delete
</a>
</li>
<li class="chapter " data-level="0.8" data-path="detectIE/README.html">
<a href="../detectIE/README.html">
<i class="fa fa-check"></i>
<b>0.8.</b>
Detect Internet Explorer
</a>
</li>
<li class="chapter " data-level="0.9" data-path="utf8/README.html">
<a href="../utf8/README.html">
<i class="fa fa-check"></i>
<b>0.9.</b>
Don't judge a book by its cover
</a>
</li>
<li class="chapter " data-level="0.10" data-path="encapsulate_collection/README.html">
<a href="../encapsulate_collection/README.html">
<i class="fa fa-check"></i>
<b>0.10.</b>
Encapsulate collection
</a>
</li>
<li class="chapter " data-level="0.11" data-path="even_odd/README.html">
<a href="../even_odd/README.html">
<i class="fa fa-check"></i>
<b>0.11.</b>
Even or Odd
</a>
</li>
<li class="chapter " data-level="0.12" data-path="nested_loop/README.html">
<a href="../nested_loop/README.html">
<i class="fa fa-check"></i>
<b>0.12.</b>
Exit nested loop
</a>
</li>
<li class="chapter " data-level="0.13" data-path="fooling_around_boolean/README.html">
<a href="../fooling_around_boolean/README.html">
<i class="fa fa-check"></i>
<b>0.13.</b>
#1 Fooling around boolean
</a>
</li>
<li class="chapter " data-level="0.14" data-path="fooling_around_boolean_2/README.html">
<a href="../fooling_around_boolean_2/README.html">
<i class="fa fa-check"></i>
<b>0.14.</b>
#2 Fooling around boolean
</a>
</li>
<li class="chapter " data-level="0.15" data-path="ghost_array/README.html">
<a href="../ghost_array/README.html">
<i class="fa fa-check"></i>
<b>0.15.</b>
Ghost Array
</a>
</li>
<li class="chapter " data-level="0.16" data-path="input_search/README.html">
<a href="../input_search/README.html">
<i class="fa fa-check"></i>
<b>0.16.</b>
Input Search
</a>
</li>
<li class="chapter " data-level="0.17" data-path="invaluable/README.html">
<a href="../invaluable/README.html">
<i class="fa fa-check"></i>
<b>0.17.</b>
Invaluable
</a>
</li>
<li class="chapter " data-level="0.18" data-path="json/README.html">
<a href="../json/README.html">
<i class="fa fa-check"></i>
<b>0.18.</b>
JSON
</a>
</li>
<li class="chapter " data-level="0.19" data-path="nested_scopes/README.html">
<a href="../nested_scopes/README.html">
<i class="fa fa-check"></i>
<b>0.19.</b>
Nested Scopes
</a>
</li>
<li class="chapter " data-level="0.20" data-path="now_you_see_me/README.html">
<a href="../now_you_see_me/README.html">
<i class="fa fa-check"></i>
<b>0.20.</b>
Now you see me...
</a>
</li>
<li class="chapter " data-level="0.21" data-path="frozen/README.html">
<a href="../frozen/README.html">
<i class="fa fa-check"></i>
<b>0.21.</b>
Frozen
</a>
</li>
<li class="chapter " data-level="0.22" data-path="point/README.html">
<a href="../point/README.html">
<i class="fa fa-check"></i>
<b>0.22.</b>
Point
</a>
</li>
<li class="chapter " data-level="0.23" data-path="running_man/README.html">
<a href="../running_man/README.html">
<i class="fa fa-check"></i>
<b>0.23.</b>
Running Man
</a>
</li>
<li class="chapter " data-level="0.24" data-path="scope/README.html">
<a href="../scope/README.html">
<i class="fa fa-check"></i>
<b>0.24.</b>
Scope
</a>
</li>
<li class="chapter " data-level="0.25" data-path="spartacus/README.html">
<a href="../spartacus/README.html">
<i class="fa fa-check"></i>
<b>0.25.</b>
Spartacus
</a>
</li>
<li class="chapter " data-level="0.26" data-path="terminator/README.html">
<a href="../terminator/README.html">
<i class="fa fa-check"></i>
<b>0.26.</b>
Terminator
</a>
</li>
<li class="chapter active" data-level="0.27" data-path="timers/README.html">
<a href="../timers/README.html">
<i class="fa fa-check"></i>
<b>0.27.</b>
Timers
</a>
</li>
<li class="chapter " data-level="0.28" data-path="undefined_values_in_array/README.html">
<a href="../undefined_values_in_array/README.html">
<i class="fa fa-check"></i>
<b>0.28.</b>
Undefined Values in Arrays
</a>
</li>
<li class="chapter " data-level="0.29" data-path="array_map_parseint/README.html">
<a href="../array_map_parseint/README.html">
<i class="fa fa-check"></i>
<b>0.29.</b>
Array Map and ParseInt
</a>
</li>
<li class="chapter " data-level="0.30" data-path="variable_scope/README.html">
<a href="../variable_scope/README.html">
<i class="fa fa-check"></i>
<b>0.30.</b>
Variable Scope
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
</li>
</ul>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header">
<!-- Actions Left -->
<a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
<a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
<div id="font-settings-wrapper" class="dropdown pull-left">
<a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
</a>
<div class="dropdown-menu font-settings">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<div class="buttons">
<button type="button" id="reduce-font-size" class="button size-2">A</button>
<button type="button" id="enlarge-font-size" class="button size-2">A</button>
</div>
<div class="buttons font-family-list">
<button type="button" data-font="0" class="button">Serif</button>
<button type="button" data-font="1" class="button">Sans</button>
</div>
<div class="buttons color-theme-list">
<button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
<button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
<button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
</div>
</div>
</div>
<!-- Actions Right -->
<div class="dropdown pull-right">
<a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
</a>
<div class="dropdown-menu font-settings dropdown-left">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<div class="buttons">
<button type="button" data-sharing="twitter" class="button">Twitter</button>
<button type="button" data-sharing="google-plus" class="button">Google</button>
<button type="button" data-sharing="facebook" class="button">Facebook</button>
<button type="button" data-sharing="weibo" class="button">Weibo</button>
<button type="button" data-sharing="instapaper" class="button">Instapaper</button>
</div>
</div>
</div>
<a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
<a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="../" >Javascript Challenges</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1">
<div class="page-inner">
<section class="normal" id="section-gitbook_143">
<h1 id="timers">Timers</h1>
<p>We have the following code to show a log in the console after 1000 ms / 1 sec.</p>
<pre><code>var check = false;
var timeStart = new Date().getTime();
setTimeout( function () {
check = true;
}, 1000 );
while( !check ){
}
console.log( 'Loop has finished', 'Elapsed time:' + (new Date().getTime() - timeStart) );
</code></pre><p>But for some weird reason it doesn't works as expected and blocks the browser, could you help us?</p>
</section>
<section class="exercise" id="section-gitbook_144">
<div class="header">
<h2>Exercise</h2>
</div>
<div class="alert alert-success">
<b>Correct!</b>
</div>
<div class="alert alert-danger error-message">
<b>False!</b>
</div>
<div class="message">
<p>Why this is happening?</p>
</div>
<div class="editor" style="height: 20px">
</div>
<pre class="hidden code-solution">As you should know Javascript is single threaded then when we launch this code the while statement doesn't free the thread because the continuos execution blocking any other statement to be executed and blocks the change of 'check' to true blocking the environment where it's executed.</pre>
<pre class="hidden code-validation">__match_answer_and_solution__</pre>
<div class="buttons">
<a href="#" class="button size-2 action-submit">Submit</a>
<a href="#" class="button size-2 action-solution">Solution</a>
</div>
</section>
<section class="exercise" id="section-gitbook_146">
<div class="header">
<h2>Exercise</h2>
</div>
<div class="alert alert-success">
<b>Correct!</b>
</div>
<div class="alert alert-danger error-message">
<b>False!</b>
</div>
<div class="message">
<p>Fix the code:</p>
</div>
<div class="editor" style="height: 140px">var check = false;
var timeStart = new Date().getTime();
setTimeout( function () {
check = true;
}, 1000 );
while( !check ){
}
console.log( 'Loop has finished', 'Elapsed time:' + (new Date().getTime() - timeStart) );</div>
<pre class="hidden code-solution">var timeStart = new Date().getTime();
var endTime = timeStart + 1000;
while( new Date().getTime() < endTime ){
}
console.log( 'Loop has finished', 'Elapsed time:' + (new Date().getTime() - timeStart) );</pre>
<pre class="hidden code-validation">assert(items[0] === 'Loop has finished');</pre>
<pre class="hidden code-context">var backConsole = console;
var items = [];
var console = {
log: function (str) {
items.push(str);
backConsole.log(str);
}
};</pre>
<div class="buttons">
<a href="#" class="button size-2 action-submit">Submit</a>
<a href="#" class="button size-2 action-solution">Solution</a>
</div>
</section>
</div>
</div>
</div>
<a href="../terminator/README.html" class="navigation navigation-prev " aria-label="Previous page: Terminator"><i class="fa fa-angle-left"></i></a>
<a href="../undefined_values_in_array/README.html" class="navigation navigation-next " aria-label="Next page: Undefined Values in Arrays"><i class="fa fa-angle-right"></i></a>
</div>
</div>
<script src="../gitbook/app.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/ace/ace.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/ace/theme-tomorrow.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/ace/mode-javascript.js"></script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/exercises.js"></script>
<script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="../gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
<script>
require(["gitbook"], function(gitbook) {
var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
gitbook.start(config);
});
</script>
<script src="../gitbook/plugins/gitbook-plugin-exercises/jsrepl/jsrepl.js" id="jsrepl-script"></script>
</body>
</html>