Code Explainers

Code explainers tagged #debounce

javascript 
const zxcvbn = require('zxcvbn');
 
const STRENGTH_LABELS = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
const STRENGTH_COLORS = ['#d64545', '#e0803c', '#d9c94c', '#5aa84f', '#2f8f3a'];

Building a live password strength meter

debounce closures dom-events
Intermediate 8 steps
php 
<?php
 
namespace App\Models;
 

Debouncing Eloquent jobs in Laravel

debounce model-events queued-jobs
Advanced 7 steps
python 
import threading
from functools import wraps
 
 

A thread-safe debounce decorator in Python

decorators debounce threading
Advanced 6 steps
typescript 
type ResizeCallback = (size: { width: number; height: number }) => void;
 
export function observeResize(callback: ResizeCallback, delay = 150) {
  let timeoutId: ReturnType<typeof setTimeout> | undefined;

Debouncing window resize in TypeScript

debounce closures event-listeners
Intermediate 6 steps
javascript 
import { useState, useRef, useCallback, useLayoutEffect } from "react";
 
export function useResizeObserver({ debounce = 0 } = {}) {
  const [size, setSize] = useState({ width: 0, height: 0 });

A resize-observing hook in React

custom-hook resizeobserver callback-ref
Advanced 8 steps
php 
final class DebouncedSessionStore
{
    private array $pending = [];
    private array $timers = [];

Debouncing session writes with an event loop

debounce event-loop atomic-write
Advanced 9 steps
rust 
use std::collections::HashSet;
use std::path::PathBuf;
use std::time::Duration;
 

Debouncing filesystem events in async Rust

debounce async channels
Advanced 7 steps
java 
public final class Debouncer<T> {
 
    private final ScheduledExecutorService scheduler =
            Executors.newSingleThreadScheduledExecutor(runnable -> {

How a debouncer collapses bursts in Java

debounce concurrency scheduling
Intermediate 9 steps
typescript 
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { AsyncPipe } from '@angular/common';

Reactive type-ahead search in Angular

rxjs reactive-forms debounce
Intermediate 9 steps
javascript 
import { useState, useEffect, useCallback, useRef } from "react";
 
export function usePersistentForm(storageKey, initialValues) {
  const [values, setValues] = useState(() => {

A React hook that persists form state to localStorage

custom-hooks localstorage debounce
Intermediate 9 steps
javascript 
import { useState, useEffect, useMemo } from 'react';
 
function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

Debounced search with cancellation in React

custom-hooks debounce abortcontroller
Intermediate 9 steps
go 
package debounce
 
import (
	"sync"

Building a debouncer in Go

concurrency debounce timers
Intermediate 6 steps
typescript 
import { useState, useEffect, useRef, useCallback } from "react";
 
interface SearchResult {
  id: string;

A debounced search hook in React

debounce custom-hooks abortcontroller
Intermediate 7 steps