需求描述：
项目过程中，需求里要求做到实时搜索
想着是只要在用户键盘输入时发起请求后渲染即可
但是在开发过程中，需要注意：
1、中文输入法下会频繁触发请求
<body>
<input type="text" class="input">
<script>
const inputEl = document.querySelector('.input');
inputEl.addEventListener('input', (event) => {
console.log('input: ', event.target.value);
})
</script>
</body>
但是想要的是：只有当最终点击了空格之后 才是我们期望的值
这个时候就需要借助 compositonstart compositonend 这两个事件
inputEl.addEventListener('compositionstart', (event) => {
console.log('compositionstart: ', event.target.value);
})
inputEl.addEventListener('compositionend', (event) => {
console.log('compositionend: ', event.target.value);
})
2、请求顺序问题
例如：
15:22:14发送请求 query 1
15:22:16再次发送请求 query 17
15:22:17接受到请求 query 17 的返回数据 渲染结果17
15:22:18接受到请求 query 1 的返回数据 渲染结果1
这样的情况会导致 用户输入框中输入的是12 但是结果是1数据
根据query来判断是否展示该数据
const input = document.querySelector('input');
const value = input.value;
fetchSearch({
query: value
}).then(() => {
const currentValue = input.value;
if (value !== currentValue) {
return;
}
// 渲染渲染
})
取消上一次请求
当请求发送时，上一次请求还未回来，则取消上一次请求的回调
