DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

The Latest JavaScript Topics

article thumbnail
How JavaScript Timers Work
At a fundamental level it's important to understand how JavaScript timers work. Oftentimes they behave unintuitively because of the single thread which they are in. Let's start by examining the three functions that we have access to with which to construct and manipulate timers. var id = setTimeout(fn, delay); - Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time. var id = setInterval(fn, delay); - Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled. clearInterval(id); - Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring. In order to understand how the timers work internally there's one important concept that needs to be explored: timer delay is not guaranteed. Since all JavaScript in a browser executes on a single thread, asynchronous events (such as mouse clicks and timers) are only run when there's been an opening in the execution. This is best demonstrated with a diagram, like in the following: There are Plenty of Reasons Why JavaScript Timers Matter You may become frustrated if you just look at JavaScript timers as something that doesn’t serve any real purpose for you. It is easy to get yourself into that mentality, but it is also not entirely productive or accurate to think of them in this way. The truth is that JavaScript timers are extremely effective, and they help control various processes that need to be controlled. You may want to set up timers to go off when someone clicks their mouse or when a certain amount of time has passed. Whatever the case may be, you need those timers to help you take care of what is happening. JavaScript timers have already proven themselves to be incredibly useful for many people, and they can be for you as well. Since JavaScript can only ever execute one piece of code at a time (due to its single-threaded nature) each of these blocks of code is "blocking" the progress of other asynchronous events. This means that when an asynchronous event occurs (like a mouse click, a timer firing, or an XMLHttpRequest completing) it gets queued up to be executed later (how this queueing actually occurs surely varies from browser to browser, so consider this to be a simplification). To start with, within the first block of JavaScript, two timers are initiated: a 10ms setTimeout and a 10ms setInterval. Due to where and when the timer was started it actually fires before we actually complete the first block of code. Note, however, that it does not execute immediately (it is incapable of doing that, because of the threading). Instead, that delayed function is queued in order to be executed at the next available moment. Additionally, within this first JavaScript block, we see a mouse click occur. The JavaScript callbacks associated with this asynchronous event (we never know when a user may perform an action, thus it's considered to be asynchronous) are unable to be executed immediately thus, like the initial timer, it is queued to be executed later. After the initial block of JavaScript finishes executing the browser immediately asks the question: What is waiting to be executed? In this case, both a mouse click handler and a timer callback are waiting. The browser then picks one (the mouse click callback) and executes it immediately. The timer will wait until the next possible time, in order to execute. Note that while the mouse click handler is executing the first interval callback executes. As with the timer, its handler is queued for later execution. However, note that when the interval is fired again (when the timer handler is executing) this time that handler execution is dropped. If you were to queue up all interval callbacks when a large block of code is executing the result would be a bunch of intervals executing with no delay between them, upon completion. Instead, browsers tend to simply wait until no more interval handlers are queued (for the interval in question) before queuing more. We can, in fact, see that this is the case when a third interval callback fires while the interval, itself, is executing. This shows us an important fact: Intervals don't care about what is currently executing, they will queue indiscriminately, even if it means that the time between callbacks will be sacrificed. Finally, after the second interval callback is finished executing, we can see that there's nothing left for the JavaScript engine to execute. This means that the browser now waits for a new asynchronous event to occur. We get this at the 50ms mark when the interval fires again. This time, however, there is nothing blocking its execution, so it fires immediately. Let's take a look at an example to better illustrate the differences between setTimeout and setInterval. setTimeout(function(){ /* Some long block of code... */ setTimeout(arguments.callee, 10); }, 10); setInterval(function(){ /* Some long block of code... */ }, 10); These two pieces of code may appear to be functionally equivalent, at first glance, but they are not. Notably, the setTimeout code will always have at least a 10ms delay after the previous callback execution (it may end up being more, but never less) whereas the setInterval will attempt to execute a callback every 10ms regardless of when the last callback was executed. There's a lot that we've learned here, let's recap: JavaScript engines only have a single thread, forcing asynchronous events to queue waiting for execution. setTimeout and setInterval are fundamentally different in how they execute asynchronous code. If a timer is blocked from immediately executing it will be delayed until the next possible point of execution (which will be longer than the desired delay). Intervals may execute back-to-back with no delay if they take long enough to execute (longer than the specified delay). All of this is incredibly important knowledge to build off of. Knowing how a JavaScript engine works, especially with the large number of asynchronous events that typically occur, makes for a great foundation when building an advanced piece of application code. This is an excerpt from my work-in-progress book: Secrets of the JavaScript Ninja. To be released Fall 2008. Previous excerpt: Partial Function Application in JavaScript
May 22, 2023
by John Resig
· 19,601 Views · 1 Like
article thumbnail
How Dynamic Rendering Works Using HTML and CSS?
We will see how dynamic rendering works using HTML and CSS for mobile and desktop. A user might be operating on both devices, but their expectation changes widely.
May 9, 2022
by Harish Rajora
· 2,975 Views · 3 Likes
article thumbnail
Playwright JavaScript Tutorial: A Complete Guide
The combination of Playwright and JavaScript allows you to create automated tests that can be run repeatedly and consistently, saving you time and effort.
May 19, 2023
by Kailash Pathak
· 3,969 Views · 2 Likes
article thumbnail
The Native Way To Configure Path Aliases in Frontend Projects
We’ll take a look at the imports field in package.json and how it can be used to configure path aliases for various use cases.
May 18, 2023
by Maksim Zemskov
· 3,258 Views · 4 Likes
article thumbnail
How to Load Cypress Chrome Extension
Learn to install the Cypress Chrome extension and avoid compromising your testing with Chrome emulators, simulators, and headless Chrome.
May 17, 2023
by Hamid Akhtar
· 1,449 Views · 1 Like
article thumbnail
How To Use the Node Docker Official Image
A step-by-step tutorial on how to create a Docker container using the official image of Node that will make your work process easier and more productive.
May 17, 2023
by Charles Ituah
· 2,908 Views · 1 Like
article thumbnail
Execution Type Models in Node.js
Learn about execution-type models and their functionality in Node.js with practical examples in this comprehensive article.
May 15, 2023
by Anton Kalik
· 3,103 Views · 4 Likes
article thumbnail
Three Scalable Next.js Architecture Boilerplate
This article provides a collection and description of useful Next.js boilerplates for building scalable web applications.
May 12, 2023
by Imamuzzaki Abu Salam
· 6,237 Views · 3 Likes
article thumbnail
Building a Live Code Sharing Platform With Dyte and React
In this tutorial, we will be creating a “Live Code Sharing Platform” that allows users to share code and engage in video and audio calls.
May 12, 2023
by Vishal Pratap Singh
· 5,401 Views · 1 Like
article thumbnail
Java String Templates Today
String manipulation is improving with JEP 430, but Manifold can help us today. Even on JDK 8, it goes further with a sophisticated templating engine.
May 12, 2023
by Shai Almog CORE
· 8,215 Views · 5 Likes
article thumbnail
Empty Character Class in JavaScript Regexes
In this blog, the reader will gain knowledge about Aba Search and Replace, which is a tool for replacing text in multiple files.
May 11, 2023
by Peter Kankowski
· 4,738 Views · 1 Like
article thumbnail
React Helpful Hints Series: Volume 1
In this series of short “bloglets” our team will cover a wide array of React topics, including developer tips, issues, and experiences.
May 10, 2023
by Joel Nylund CORE
· 2,370 Views · 2 Likes
article thumbnail
How To Develop a Modern Image Gallery With HTML, CSS, and JavaScript
In this tutorial, the reader will take a walk-through on how to build a modern image gallery using HTML, CSS, and JavaScript.
May 9, 2023
by Murithi Makena
· 2,460 Views · 1 Like
article thumbnail
Shallow Copy vs. Deep Copy in JavaScript
In this article, we'll explore the differences between shallow and deep copy in JavaScript and when to use each technique.
May 9, 2023
by Tien Nguyen
· 2,118 Views · 1 Like
article thumbnail
Top Six React Development Tools
The top six React development tools are used by every React developer every day, which can help to build better, faster, and more efficient React applications.
May 4, 2023
by Hardik Thakker
· 5,471 Views · 3 Likes
article thumbnail
Building the World's Most Resilient To-Do List Application With Node.js, K8s, and Distributed SQL
This article demonstrates how you can build cloud-native Node.js applications with Kubernetes (K8s) and distributed SQL.
May 2, 2023
by Brett Hoyer
· 6,742 Views · 5 Likes
article thumbnail
Cypress JavaScript Tutorial: A Step-By-Step Handbook
In this article, the reader will learn how Cypress test automation using JavaScript can significantly improve the speed and efficiency of software testing.
May 2, 2023
by Kailash Pathak
· 3,984 Views · 2 Likes
article thumbnail
How To Add Chatbot To React Native
In this tutorial, we are going to build a chatbot application from scratch using Kompose (Kommunicate Chatbot) and React Native.
April 28, 2023
by Devashish Mamgain
· 6,036 Views · 1 Like
article thumbnail
How To Use Face Recognition for Authentication in Vue.JS and Golang
This article will introduce how to integrate FaceIO in Vue.js and Golang to achieve identity authentication for facial recognition.
April 27, 2023
by jianxiang sun
· 4,030 Views · 3 Likes
article thumbnail
Creating a Portfolio Website Using Bit Components: Step-by-Step Guide
Learn how to build a professional portfolio website using Bit components with this comprehensive step-by-step guide.
April 27, 2023
by Lakindu Hewawasam
· 3,787 Views · 1 Like
  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • ...
  • Next

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: