搜索框中文输入导致高频触发的优化

最新推荐文章于 2024-11-08 16:09:18 发布

Niucode

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量221

点赞数 3

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/niucode/article/details/137177759

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了一个JavaScript代码示例，如何在搜索框中使用防抖技术来降低因中文输入导致的高频触发。通过检测compositionstart和compositionend事件，实现中文输入期间暂停函数执行，直到输入结束再调用防抖处理函数。

摘要由CSDN通过智能技术生成

下面的代码示例是基于防抖下搜索框中使用中文输入导致高频触发的优化：

<!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>