FixCode

Fix the Debounce Function

Hard

Challenge 8 of 20

Fix the Debounce Function

Hard

This debounce utility function is supposed to limit how often a function can be called, but it's not working correctly. Fix the implementation.

Challenge 8 of 20

80 XP

Community Solutions

Utility FunctionsPerformanceTimingJavaScript

Exit Challenge

Test Cases

0/1 passing

Test Case #1

Input: Call debouncedSearch multiple times

Expected: Should only execute once after the wait period

Run tests to see results

solution.js

<span class="token keyword">function</span> debounce(func, wait) {
  <span class="token keyword">let</span> timeout;
  
  <span class="token keyword">return</span> <span class="token keyword">function</span> executedFunction(...args) {
    <span class="token keyword">const</span> later = () =>; {
      timeout = <span class="token boolean">null</span>;
      func(...args);
    };
    
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

<span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Example usage:</span>
<span class="token keyword">const</span> debouncedSearch = debounce(<span class="token keyword">function</span>(query) {
  console.log(&#<span <span class="token keyword">class</span>="token number">039</span>;Searching <span class="token keyword">for</span>:&#<span <span class="token keyword">class</span>="token number">039</span>;, query);
}, <span <span class="token keyword">class</span>="token number">500</span>);

<span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// This should only log once after 500ms</span>
debouncedSearch(&#<span <span class="token keyword">class</span>="token number">039</span>;hello&#<span <span class="token keyword">class</span>="token number">039</span>;);
debouncedSearch(&#<span <span class="token keyword">class</span>="token number">039</span>;hello&#<span <span class="token keyword">class</span>="token number">039</span>;);
debouncedSearch(&#<span <span class="token keyword">class</span>="token number">039</span>;hello&#<span <span class="token keyword">class</span>="token number">039</span>;);

function debounce(func, wait) {
  let timeout;
  
  return function executedFunction(...args) {
    const later = () => {
      timeout = null;
      func(...args);
    };
    
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Example usage:
const debouncedSearch = debounce(function(query) {
  console.log('Searching for:', query);
}, 500);

// This should only log once after 500ms
debouncedSearch('hello');
debouncedSearch('hello');
debouncedSearch('hello');

Console

Run your code to see output here

Previous ChallengeNext Challenge

Exit