原生js:有一个实时搜索的搜索框，连续输入的时候不触发实时搜索，当用户停下来1s以上时，再显示搜索结果

本文链接：https://blog.csdn.net/weixin_42448623/article/details/100799299

有一个实时搜索的搜索框，连续输入的时候不触发实时搜索，当用户停下来1s以上时，再显示搜索结果

思路

触发键盘按下事件记录一个当前时间x1（毫秒）
触发键盘弹起事件触发一个1s的定时器获取一个当前时间x2（毫秒）
x2 - x1 >= 1000 （毫秒）即停下来1s及以上
执行搜索操作

代码在此：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>有一个实时搜索的搜索框，连续输入的时候不触发实时搜索，当用户停下来1s以上时，再显示搜索结果</title>
</head>

<body>
    <input id="input" type="text" placeholder="xxx" onfocus="_fοcus()" onblur="_blur()" />
    <span id="span"></span>
    <script>
        var strJson = ["谢1", "谢2", "谢3"];
        var input = document.getElementById("input");
        var span = document.getElementById("span");
        var _date,
            timeline = 1000,
            _date2,
            time,
            spanHtml,
            fοcusStatus = false
        	strRes = [];

        function _fοcus() 
            fοcusStatus = true;
        }
        function _blur() {
            fοcusStatus = false
        }
        window.onkeydown = function (e) {
            _date = new Date().getTime();
        };
        window.onkeyup = function (e) {
            if (fοcusStatus) {
                time = setTimeout(() => {
                    var value = input.value.replace(/^\s+|\s+$/g, "");
                    if (value != "") {
                        _date2 = new Date().getTime();
                        var _date3 = _date2 - _date;
                        if (_date3 >= timeline) {
                            for (var i = 0; i < strJson.length; i++) {
                                var indesOf = strJson[i].indexOf(value);
                                if (indesOf != -1) {
                                    strRes.push(strJson[i]);
                                }
                            }
                            if (strRes.length == 0) {
                                spanHtml = "空";
                            } else {
                                spanHtml = strRes.join("");
                            }
                        }
                        span.innerHTML = spanHtml;
                    }
                }, timeline);
            }
        };
    </script>
</body>

</html>