Using Function Closures with Timers
Problem
You want to provide a function with a timer, but you want to add the function directly
into the timer method call.
Solution
Use an anonymous function as first parameter to the setInterval() or setTimeout()
method call:
intervalId=setInterval( function() { x+=5; var left = x + "px"; document.getElementById("redbox").style.left=left; },100);
EXPLAIN
Unlike the other material covered in this chapter, JavaScript timers don’t belong to any of the basic built-in objects. Instead, they’re part of the basic Web API (previously known as the Browser Object Model, or BOM). In the browser, they’re properties of the Window object, the browser’s global object, though we don’t need to specify window when ac‐ cessing them. In Node.js, the two timer functions are part of the global object.
When you’re creating timers using setTimeout() and setInterval(), you can pass in a function variable as the first parameter:
function bing() { alert('Bing!'); } setTimeout(bing, 3000);
The approach also demonstrates how the use of this function closure allows access to the parent function’s local variables within the timer method. In the example, clicking the red box starts the timer, and the box moves. Clicking the box again clears the timer,and the box stops. The position of the box is tracked in the x variable, which is within scope for the timer function, as it operates within the scope of the parent function.
Using an anonymous function within a setInterval timer parameter
<!DOCTYPE html> <head> <title>interval and anonymous function</title> <style> #redbox { position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="redbox"></div> <script> var intervalId=null; document.getElementById('redbox').addEventListener('click',startBox,false); function startBox() { if (intervalId == null) { var x = 100; intervalId=setInterval( function() { x+=5; var left = x + "px"; document.getElementById("redbox").style.left=left; },100); } else { clearInterval(intervalId); intervalId=null; } } </script> </body>There’s no guarantee that the timer event fires when it is supposed to fire. Timers run on the same execution thread as all other user interface (UI) events, such as mouseclicks. All events are queued and blocked, including the timer event, until its turn. So, if you have several events in the queue ahead of the timer, the actual time could differ —probably not enough to be noticeable to your application users, but a delay can happen.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment