#timers code explainers

go

func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels

Advanced 7 steps

typescript

type ToastVariant = "info" | "success" | "warning" | "error";
 
interface Toast {
  id: string;

A self-dismissing toast store with dedup

observer-pattern deduplication timers

Intermediate 10 steps

javascript

class Carousel {
  constructor(root, { interval = 5000 } = {}) {
    this.root = root;
    this.track = root.querySelector('.carousel__track');

Building an accessible auto-playing carousel

dom state-management timers

Intermediate 9 steps

javascript

import { createContext, useContext, useState, useCallback, useRef } from "react";
 
const ToastContext = createContext(null);

Building a toast notification system in React

context state-management hooks

Intermediate 7 steps

javascript

class ToastQueue {
  constructor(container, { duration = 4000, max = 3 } = {}) {
    this.container = container;
    this.duration = duration;

Building a rate-limited toast queue

queue dom manipulation throttling

Intermediate 8 steps

typescript

type Countdown = {
  days: number;
  hours: number;
  minutes: number;

Building a self-stopping countdown timer

date-math closures timers

Intermediate 9 steps

typescript

import { useCallback, useEffect, useRef, useState } from "react";
 
interface UseResendCooldownOptions {
  cooldownSeconds?: number;

A resend cooldown hook in React

custom-hooks timers state-management

Intermediate 7 steps

go

package editor
 
import (
	"context"

How a debouncer coalesces bursts in Go

debounce concurrency timers

Intermediate 8 steps

javascript

const IDLE_TIMEOUT = 15 * 60 * 1000;
const WARNING_BEFORE = 60 * 1000;
const ACTIVITY_EVENTS = ['mousemove', 'keydown', 'scroll', 'touchstart', 'click'];

How an idle-session monitor logs you out

timers throttling broadcastchannel

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
export function useCountdown(initialSeconds) {
  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);

Building a useCountdown hook in React

custom-hooks state-management side-effects

Intermediate 8 steps

typescript

import { Injectable, signal, computed } from '@angular/core';
 
export type ToastKind = 'success' | 'error' | 'info' | 'warning';

Building a signal-based toast service in Angular

signals state-management dependency-injection

Intermediate 8 steps

typescript

type CountdownState = {
  deadline: number;
  onTick: (remaining: number) => void;
  onComplete: () => void;

A countdown timer that survives reloads

persistence timers localstorage

Intermediate 10 steps

typescript

type Event = Record<string, unknown>;
 
interface BatcherOptions {
  endpoint: string;

Batching analytics events in TypeScript

batching buffering async

Intermediate 8 steps

javascript

function createCountdownTimer(durationSeconds, { onTick, onComplete } = {}) {
  let remaining = durationSeconds;
  let intervalId = null;

Building a countdown timer with closures

closures factory-function timers

Intermediate 9 steps

typescript

import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers

Advanced 10 steps

go

package debounce
 
import (
	"sync"

Building a debouncer in Go

concurrency debounce timers

Intermediate 6 steps

javascript

function debounce(fn, delay) {
  let timeoutId = null;
 
  function debounced(...args) {

Building a debounce function in JavaScript

closures timers higher-order-functions

Intermediate 6 steps

javascript

function throttle(fn, wait) {
  let lastCall = 0;
  let timeoutId = null;
  let lastArgs = null;

Building a leading-and-trailing throttle

closures rate-limiting timers

Advanced 6 steps