24、js - 面试 - 防抖

EchoLiner

已于 2023-06-13 20:36:51 修改

阅读量104

点赞数

文章标签： javascript 开发语言 ecmascript 前端前端框架 Powered by 金山文档

于 2023-06-06 15:01:41 首次发布

本文链接：https://blog.csdn.net/echoliner/article/details/131068060

版权

文章介绍了JavaScript中的防抖技术，用于优化搜索框输入事件。通过lodash库的_.debounce()方法或者自定义的debounce函数，在单位时间内用户频繁输入时，只在最后一次输入后执行搜索操作，提高性能。

摘要由CSDN通过智能技术生成

<body>

    <input type="text">

</body>

</html>
<script src="./lodash.min.js"></script>
<script>

    // 防抖：单位时间内，频繁地触发事件，只执行最后一次
    // 使用场景：搜索框

    function myFn() {
        console.log("搜索了1");
    }

    // 方案一：使用lodash库的_.debounce()方法，_.debounce()方法会返回一个函数
    // document.querySelector('input').addEventListener('input', _.debounce(myFn, 500));

    // 方案二：自己手写防抖函数
    function debounce(fn, time) {
        let timer = null;
        return function () {
            timer && clearTimeout(timer);
            timer = setTimeout(() => {
                fn();
            }, time);
        }
    }
    document.querySelector('input').addEventListener('input', debounce(myFn, 500));


</script>