AI Response Diff

Compare two AI responses side by side. Highlight differences to evaluate prompt changes or compare models.

Model A

Model B

Response A

Response B

To implement a debounce function in TypeScript, you need to delay the execution of a function until a certain amount of time has passed since the last invocation. Here's how to do it:

```typescript
function debounce<T extends (...args: any[]) => void>(
  func: T,
  waitMs: number
): (...args: Parameters<T>) => void {
  let timeoutId: ReturnType<typeof setTimeout> | null = null;

return function debouncedFn(...args: Parameters<T>): void {
    if (timeoutId !== null) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      func(...args);
      timeoutId = null;
    }, waitMs);
  };
}
```

**How it works:**
1. A `timeoutId` variable tracks the pending timer.
2. Each time the returned function is called, any existing timer is cleared.
3. A new timer is set that will invoke the original function after `waitMs` milliseconds of inactivity.
4. After execution, the `timeoutId` is reset to `null`.

**Example usage:**
```typescript
const debouncedSearch = debounce((query: string) => {
  console.log("Searching for:", query);
  fetchResults(query);
}, 300);

inputElement.addEventListener("input", (e) => {
  debouncedSearch((e.target as HTMLInputElement).value);
});
```

This pattern is especially useful for search inputs, window resize handlers, and scroll events where you want to avoid excessive function calls.

Response A

652

Characters

Words

~163

Est. Tokens

Response B

1,346

Characters

183

Words

~337

Est. Tokens

Analysis

Response A is 52% shorter than Response B
Both responses include code examples
Response A uses arrow function, Response B uses named function