JavaScript实现防抖与节流

最新推荐文章于 2024-02-20 13:01:51 发布

yipengup

最新推荐文章于 2024-02-20 13:01:51 发布

阅读量286

点赞数

分类专栏：前端文章标签：防抖节流

本文链接：https://blog.csdn.net/qq844579582/article/details/89072710

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 防抖与节流

1.1 定义

在一定时间之内, 只允许触发事件一次, 防止多次触发.

1.2 区别

防抖的意义在执行的是用户最后一次触发的事件, 而节流执行的是用户第一次触发的事件.

1.3 场景重现

防抖: 输入搜索框随时监听用户键盘输入, 及时返回关于搜索的关键字供用户选择, 如何解决用户敲一下键盘我们就调用一次服务器, 频繁调用服务器, 增大服务器的开销的问题?
节流: 前端调用服务端接口, 在接口没有返回的同时, 我们如何防止用户再次点击事件按钮多次执行数据?

1.4 解决思路

防抖: 我们可以 延迟执行 触发函数, 一旦还没有执行函数用户再次触发事件, 那么我们抛弃上一步的事件执行最新一次的事件. 关键字 延迟执行. 核心代码如下:

 // 监听键盘事件模拟搜索场景.
        let shakeTimeOut = null;
        searchBox.addEventListener("keyup", function () {
            let value = searchBox.value.trim();
            if (!value) {
                return false;
            }
            // 只要重新输入清空以前的定时任务
            if (shakeTimeOut) {
                clearTimeout(shakeTimeOut);
            }
            // 重新定义最新的定时任务
            shakeTimeOut = setTimeout(function () {
                // 真正执行函数部分
                console.debug(value);
            }, 1000);
        });

节流 我们可以 通过控制一段时间内关键字状态 来执行函数. 核心代码如下:

			// 利用 saveStreamFlag 关键字控制代码执行
        let saveStreamFlag = true;
        searchBtn.addEventListener("click", function () {
            if (!saveStreamFlag) {
                console.debug("搜索值太频繁");
                return false;
            }
            saveStreamFlag = false;
            saveStream();
            // 执行 saveStream() 方法的时间不会影响改变 saveStreamFlag标识改变的时间
            setTimeout(function () {
                saveStreamFlag = true;
              // 我们可以预估方法执行的时间来改变标识的时间
            }, 1000);
        });

1.5 逻辑代码

代码中涉及到了利用H5创建本地数据库, 一旦触发搜索, 我们将用户搜索的记录存储在数据库中, 利用input[list] 和datalist 标签实现输入搜索框的实现(代码中涉及背景图片和字体资源请忽略).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Js实现防抖和节流</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    /*定义外部网络字体*/
    @font-face {
        font-family: WebFont;
        src: url("font/ErZiYuanMoFaShaoNvJian-2.ttf");
    }

    body {
        font-family: WebFont;
        font-size: 20px;
        background: black;
    }
    #box {
        margin: auto;
        width: 1280px;
        height: 800px;
        background-image: url("image/backend.jpg");
        background-size: cover;
        border: none;
    }

    #content {
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        display: table;
        text-align: center;
        color: #e91e63;
    }

    #content section {
        display: inline-block;
        width: 500px;
        height: 300px;
    }

    #preventShakeBox input{
        height: 30px;
        line-height: 30px;
        outline: none;
        border-radius: 5px;
        border: none;
        padding-left: 5px;
    }
    #preventShakeBox input::placeholder {
        color: #999999;
    }

    #saveStreamBox input{
        height: 30px;
        line-height: 30px;
        outline: none;
        border-radius: 5px;
        border: none;
        padding: 0 20px;
        cursor: pointer;
    }

    #saveStreamBox input:hover {
        background-color: #e91e63;
        color: #ffffff;
    }

</style>
<body>
    <div id="box">
        <section id="content">
            <h1>Js实现防抖与节流</h1>
            <section id="preventShakeBox">
                <h2>防抖</h2>
                <!--利用 input 和 datalist 标签绑定实现可输入和下拉的功能-->
                <input type="text" placeholder="请输入要搜索的值" aria-label="防抖" list="data" id="searchBox"/>
                <datalist id="data">
                </datalist>
            </section>
            <section id="saveStreamBox">
                <h2>节流</h2>
                <input type="button" value="搜索" id="searchBtn">
            </section>
        </section>
    </div>
</body>
<script type="text/javascript">
    /*将搜索的值存入本地数据库*/
    let db = openDatabase("db_search", "1.0", "test prevent shake and save stream", 1024 * 1024 * 2);
    let searchBtn = document.getElementById("searchBtn");
    let searchBox = document.getElementById("searchBox");
    let data = document.getElementById("data");

    // 创建数据库
    db.transaction(function (transaction) {
        transaction.executeSql(" drop table if exists search_history");
        transaction.executeSql(" create table search_history ( key varchar(255) unique not null)" ,
            [], function () {
            console.debug("数据库创建成功");
        }, function (transaction, error) {
            console.debug("数据库创建失败, 失败原因是: " + error.message);
        });
    });

    window.onload = function () {

        // 将搜索的值插入数据库并刷新datalist的值
        let saveStreamFlag = true;
        searchBtn.addEventListener("click", function () {
            if (!saveStreamFlag) {
                console.debug("搜索值太频繁");
                return false;
            }
            saveStreamFlag = false;
            saveStream();
            // 执行 saveStream() 方法的时间不会影响改变 saveStreamFlag标识改变的时间
            // 我们可以预估方法执行的时间来改变标识的时间
            setTimeout(function () {
                saveStreamFlag = true;
            }, 1000);
        });



        // 监听键盘事件模拟搜索场景.
        let shakeTimeOut = null;
        searchBox.addEventListener("keyup", function () {
            let value = searchBox.value.trim();
            if (!value) {
                return false;
            }
            // 只要重新输入清空以前的定时任务
            if (shakeTimeOut) {
                clearTimeout(shakeTimeOut);
            }
            // 重新定义最新的定时任务
            shakeTimeOut = setTimeout(function () {
                console.debug(value);
            }, 1000);
        });
    };

    // 刷新datalist的值
    function flushDataList(transaction) {
        transaction.executeSql("select * from search_history", [], function (transaction,resultSet) {
            let rows = resultSet.rows;
            let options = "";
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i].key;
                console.debug(name);
                options += `<option value="${name}">${name}</option>`;
            }
            data.innerHTML = options;
        }, function (transaction, error) {
            console.debug("查询历史记录失败, 失败原因为: " + error.message);
        });
    }

    function saveStream() {
        const value = searchBox.value.trim();
        if (!value) {
            console.debug("搜索参数不能为空");
            return false;
        }
        console.debug("参加搜索的值为: " + value);
        db.transaction(function (transaction) {
            transaction.executeSql("select * from search_history where key = ? ", [new Object(value)], function (transaction, resultSet) {
                let rows = resultSet.rows;
                if (rows.length <= 0) {
                    transaction.executeSql("insert into search_history(key) values( ? )", [new Object(value)], function () {
                        console.debug("插入成功");
                    }, function (transaction, error) {
                        console.debug("插入失败, 失败原因: " + error.message);
                    });
                    flushDataList(transaction);
                }
            }, function (transaction, error) {
                console.debug("查询历史记录失败, 失败原因为: " + error.message);
            });
        });
    }

</script>
</html>

yipengup

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现防抖与节流

1. 防抖与节流1.1 定义在一定时间之内, 只允许触发事件一次, 防止多次触发.1.2 区别防抖的意义在执行的是用户最后一次触发的事件, 而节流执行的是用户第一次触发的时间.1.3 场景重现防抖: 输入搜索框随时监听用户键盘输入, 及时返回关于搜索的关键字供用户选择, 如何解决用户敲一下键盘我们就调用一次服务器, 频繁调用服务器, 增大服务器的开销的问题?节流: 前端调用...
复制链接

扫一扫

专栏目录