ajax案例:搜索功能(防抖)

m0_63400611

已于 2022-05-18 16:17:21 修改

阅读量163

点赞数

分类专栏： ajax 文章标签： ajax

于 2022-03-30 19:29:05 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123854522

版权

ajax 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

当中包括

输入框的防抖

什么是防抖

防抖策略(debounce)是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时

防抖的应用场景

用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源

实现输入框的防抖

//定义延时器的id
var timer = null;
//定义防抖的函数
function debounceSearch(kw) {
    timer = setTimeout(function() {
        getSuggestList(kw);
    }, 500)
}

并且在每次键盘抬起事件中首先清除定时器timer

缓存搜索的建议列表

定义全局缓存对象

//缓存对象
var cacheObj = {};

将搜索的结果保存到缓存对象中

function renderSuggestList(res) {
    /*省略部分代码*/

    //获取到用户输入的内容 当作键
    var k = $('#ipt').val().trim();
    //需要将数据作为值 进行缓存
    cacheObj[k] = res
}

优先从缓存中获取搜索建议

$('#ipt').on('keyup', function() {

    /*省略部分代码*/    



    //优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
        return renderSuggestList(cacheObj[keywords]);
    }
    //获取搜索建议列表
    debounceSearch(keywords);
})

代码

index.html(包含JavaScript)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/search-try.css">
    <script src="../../../js/jQuery.js"></script>
    <script src="../../../js/template-web.js"></script>
</head>

<body>
    <div class="searchbox">
        <div class="container">
            <input type="text" placeholder="请输入关键词" id="ipt">
            <button id="btnsearch">搜索</button>
        </div>
        <div class="suggest-list"></div>
    </div>

    <!--模板结构-->
    <script type="text/html" id="tpl-suggestList">
        {{each result}}
        <!--搜索建议项-->
        <div class="suggest-item">{{$value[0]}}</div>
        {{/each}}
    </script>

    <script>
        $(function() {
            //定义全局缓存对象
            var cacheObj = {};

            //定义延时器的id
            var timer = null;
            //定义防抖的函数
            function debounceSearch(kw) {
                timer = setTimeout(function() {
                    getSuggestList(kw);
                }, 500)
            }

            //监听输入框的keyup事件 获取用户每次按下键盘输入的内容
            $('#ipt').on('keyup', function() {
                //每次检测到键盘抬起清除一次定时器 防抖
                clearInterval(timer);
                //获取用户输入的内容
                var keywords = $(this).val().trim();
                if (keywords.length <= 0) {
                    return $('.suggest-list').empty().hide();
                }
                //优先从缓存中获取搜索建议
                if (cacheObj[keywords]) {
                    return renderSuggestList(cacheObj[keywords]);
                }
                //获取搜索建议列表
                debounceSearch(keywords);
            })

            //获取搜索建议列表函数getSuggestList()
            function getSuggestList(kw) {
                $.ajax({
                    //指定请求的URL地址 其中q是用户输入的关键词
                    url: 'http://suggest.taobao.com/sug?q=' + kw,
                    //指定要发起的是JSONP请求
                    dataType: 'jsonp',
                    success: function(res) {
                        renderSuggestList(res);
                    }
                })
            }

            //定义渲染模板结构的函数
            function renderSuggestList(res) {
                //如果没有需要渲染的数据则直接return
                if (res.result.length <= 0) {
                    return $('.suggest-list').empty().hide();
                }
                //渲染模板结构
                var htmlStr = template('tpl-suggestList', res);
                $('.suggest-list').html(htmlStr).show();

                //获取到用户输入的内容 当作键
                var k = $('#ipt').val().trim();
                //需要将数据作为值 进行缓存
                cacheObj[k] = res;
            }
        })
    </script>
</body>

</html>

index.css

.searchbox {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: 30%;
}

.container {
    display: flex;
    align-items: center;
}

.container input {
    width: 400px;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 2px solid rgb(255, 168, 96);
    outline: none;
    text-indent: 4px;
}

.container button {
    height: 40px;
    width: 60px;
    background-color: rgb(255, 168, 96);
    border: 2px solid rgb(255, 168, 96);
    outline: none;
    cursor: pointer;
    letter-spacing: 5px;
}

.suggest-list {
    width: 458px;
    border: 1px solid #ccc;
    font-size: 18px;
    display: none;
}

.suggest-item {
    text-indent: 4px;
    border: 0;
    padding: 2px 0 2px 0;
    cursor: pointer;
}

.suggest-item:hover {
    background-color: rgb(224, 224, 224);
}