随记

FQIP

于 2020-04-17 21:47:13 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/u010047432/article/details/105589050

版权

2020.04.17

刚看到了一个关于：如何解决搜索候选词因网络延迟而导致的当前显示结果与当前的搜索词不匹配的问题？

于是顺手做了下，这里通过times和Math.random()模拟了请求的随机先后顺序

<body>
    <input type="text" class="inpt">
    <p class="res"></p>
    <script>
        // 函数防抖 两个参数 fn：回调函数  time：延迟时间
        function debunce(fn, time = 1000){
            var timer = null; 
            return function(e){
                if(timer){
                    clearTimeout(timer);
                    timer = null;
                }
                timer = setTimeout(function(){
                    fn.call(e.target)
                }, time)
            }
        };

        var searchBehavior = (function(){
            var times = [500, 3000];
            var latestKeyWords = "";
            var http = function(keyWords){
                var that = this;
                setTimeout(function(){
                    // 如果原有传入的参数与最新的搜索词不一致，则不更新数据
                    if(keyWords != latestKeyWords) return;
                    console.log(keyWords, latestKeyWords)
                    document.getElementsByClassName('res')[0].innerText = keyWords;
                }, times[Math.random() > 0.5 ? 1 : 0]) // 模拟请求可能的延迟
            }

            // 搜索
            function doSearch(){
                document.getElementsByClassName('inpt')[0].addEventListener("input", debunce(function(){
                    latestKeyWords = this.value;
                    http.call(this, latestKeyWords);
                }, 100))
            }   
            // 返回一个初始化函数
            return function(){
                doSearch()
            }
        }())

        searchBehavior()
    </script>
</body>

FQIP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随记

2020.04.17刚看到了一个关于：如何解决搜索候选词因网络延迟而导致的当前显示结果与当前的搜索词不匹配的问题？于是顺手做了下，这里通过times和Math.random()模拟了请求的随机先后顺序<body> <input type="text" class="inpt"> <p class="res"></p>...
复制链接

扫一扫

随记

“相关推荐”对你有帮助么？