下面的代码示例是基于防抖下搜索框中使用中文输入导致高频触发的优化 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<script>
function debounce(func, delay) {
let timer;
return function () {
// 这一小部分就是优化的判断，isComposition为true证明现在是中文输入
// 直接return，不要触发
if (isComposition) {
return
}
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
// 示例：在输入框中输入文字时触发防抖函数
// const input = document.querySelector('input');
function handleInput() {
console.log('Input value:', input.value);
}
const debouncedInput = debounce(handleInput, 300);
const input = document.querySelector('input')
input.addEventListener('input', debouncedInput);
// 以下是搜索框进行中文输入时导致高频触发的优化
let isComposition = false
input.addEventListener('compositionstart', () => {
isComposition = true
console.log('中文输入开始');
})
input.addEventListener('compositionend', () => {
isComposition = false
console.log('中文输入结束');
debouncedInput()
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
