摘要：在前端开发中，搜索框的实时搜索功能是一个常见场景。用户输入文字时，每输入一个字符就发起搜索请求。但这
在前端开发中，搜索框的实时搜索功能是一个常见场景。用户输入文字时，每输入一个字符就发起搜索请求。但这里存在一个潜在的竞态问题：如果后发起的请求比先发起的请求更快返回，可能会导致错误的搜索结果显示。防抖能一定程度减少竞态问题的出现，但是无法杜绝。
竞态问题搜索示例# results { margin-top: 20px; border: 1px solid #ccc; padding: 10px; min-height: 100px; }竞态问题搜索示例
搜索结果将显示在这里let requestVersion = 0async function mockSearchApi(query) { const delay = 1000 - query.length * 200 await new Promise((resolve) => setTimeout(resolve, delay)) return `查询"${query}"的结果，延迟${delay}ms` }async function raceSafeSearch(query) { const currentVersion = ++requestVersiontry { const response = await mockSearchApi(query) if (currentVersion === requestVersion) { document.getElementById('results').textContent = response console.log(`显示结果: ${response}`) } else { console.log(`忽略过时结果: ${response} (当前版本: ${requestVersion}, 请求版本: ${currentVersion})`) } } catch (error) { console.error('搜索出错:', error) } } document.getElementById('searchInput').addEventListener('input', (e) => { const query = e.target.value.trim query && raceSafeSearch(query) })通过这种乐观锁机制，确保了只有最后一次请求的结果会被显示，有效解决了前端搜索中的竞态问题。这种方法简单高效，不需要复杂的状态管理，适用于大多数异步场景下的竞态问题处理。
来源：墨码行者
