JS Taobao search box anti-shake strategy

The concept of anti-shake: anti-shake means that after the event is triggered, the callback is executed after a delay of n seconds. If the event is triggered again within this n seconds, the timing is restarted.

The benefit of anti-shake: The advantage of anti-shake is that the callback will not be executed frequently, which can ensure that the callback is only executed once in the end, and can improve browser performance.

Take the case of the Taobao input box as an example. I don’t want to send a JSONP request every time I press the keyboard, but I want to send only one request after the input is completed. That is what we often call the input box anti-shake.

There are three core steps for input box anti-shake:

(1) Define an anti-shake timer

(2) Define an anti-shake function

(3) Clear the timer immediately when the keyup event is triggered

That is to say, when the user's keyboard pops up, it is equivalent to pressing the keyboard, first clearing the timer, and then starting a timer. The code in this timer will be executed after 500ms. If the user returns within 500ms When the keyboard is pressed, the timer will be cleared again, and then a timer will be restarted, that is, if three letters are pressed quickly, only one JSONP request will be executed in the end.

Taobao input box anti-shake code:

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

.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 Taobao search box anti-shake strategy

Guess you like