JS淘宝搜索框防抖策略

防抖的概念：防抖就是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

防抖的好处：防抖的好处在于不会频繁执行回调，能保证回调最终只被执行一次，能提高浏览器性能。

拿淘宝输入框案例为例，不想每次按下键盘都去发送JSONP请求，想要输入完毕之后最后只发送一次请求。也就是我们常说的输入框防抖。

输入框防抖的核心步骤有三个：

（1）定义一个防抖动的timer

（2）定义一个防抖的函数

（3）在触发keyup事件时立即清空timer

也就是当用户键盘弹起之后，这里相当于就是按下键盘后，先清楚定时器，然后开启一个定时器，这个定时器里面的代码是500ms之后才会执行，要是在这500ms之内用户又按下了键盘，那就会再清除定时器，再重新开启一个定时器，也就是如果快速按下三个字母，最后只会执行一次JSONP请求。

淘宝输入框防抖代码：

<!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>Document</title>
    <!-- 导入模板引擎 -->
    <script src="./lib/template-web.js"></script>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css" />
    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <div class="container">
        <!-- Logo -->
        <img src="./images/taobao_logo.png" alt="" class="logo" />

        <div class="box">
            <!-- tab 栏 -->
            <div class="tabs">
                <div class="tab-active">宝贝</div>
                <div>店铺</div>
            </div>
            <!-- 搜索区域（搜索框和搜索按钮） -->
            <div class="search-box">
                <input type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
            搜索
          </button>
            </div>
            <!-- 搜索建议列表 -->
            <div id="suggest-list">

            </div>
        </div>
    </div>
    <!-- 定义模板结构 -->
    <script type="text/html" id="tpl">
        {
   
   {each result}}
        <div class="suggest-item">
            {
   
   {$value[0]}}
        </div>
        {
   
   {/each}}
    </script>
    <script>
        // 为输入框绑定keyup事件
        $(function() {
                // 1.定义延时器的id
                var timer = null;
                // 2.定义防抖的函数
                function debounce(kw) {
                    timer = setTimeout(() => {
                        getlist(kw);
                    }, 500)
                }
                $('.ipt').on('keyup', function() {
                    // 清掉延时器  
                    clearTimeout(timer);
                    var word = $(this).val().trim();
                    if (word.length <= 0) {
                        // 这一步操作的意思是当输入为空的时候隐藏下面的内容
                        return $('#suggest-list').empty().hide();
                    }
                    debounce(word);
                })
            })
            // 获取搜索建议列表
        function getlist(kw) {
            $.ajax({
                url: 'https://suggest.taobao.com/sug?q=' + kw,
                dataType: 'jsonp',
                success: function(res) {
                    renderlist(res);
                }
            })
        }
        // 渲染结构函数
        function renderlist(res) {
            // 如果请求回来的数据长度为0则直接return 
            if (res.result.length <= 0) {
                return $('#suggest-list').empty().hide();
            }
            // 若存在则渲染模板结构
            var htmlstr = template('tpl', res);
            $('#suggest-list').html(htmlstr).show();
        }
    </script>
</body>

</html>

search.css代码：

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.logo {
    width: 225px;
    height: 65px;
    margin: 50px 0;
}

.tabs {
    display: flex;
}

.tabs>div {
    width: 55px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
}

.tabs>div:hover {
    text-decoration: underline;
    color: #ff5700;
}

.tab-active {
    background-color: #ff5700;
    font-weight: bold;
    color: white;
}

.tabs>.tab-active:hover {
    color: white;
    text-decoration: none;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box .ipt {
    box-sizing: border-box;
    width: 500px;
    height: 34px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    outline: none;
    border: 2px solid #ff5700;
}

.btnSearch {
    margin: 0;
    height: 34px;
    border: none;
    background-color: #ff5700;
    color: white;
    letter-spacing: 1em;
    text-align: center;
    width: 90px;
    padding-bottom: 5px;
    outline: none;
    cursor: pointer;
}

.btnSearch:hover {
    opacity: 0.9;
}

#suggest-list {
    border: 1px solid #ccc;
    display: none;
}

.suggest-item {
    line-height: 30px;
    padding-left: 5px;
}

.suggest-item:hover {
    cursor: pointer;
    background-color: #eee;
}

JS淘宝搜索框防抖策略

猜你喜欢