防抖debounce函数的基本使用

最新推荐文章于 2024-02-29 16:05:00 发布

陈吖

最新推荐文章于 2024-02-29 16:05:00 发布

阅读量2.1k

点赞数

分类专栏： Es6 JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_47230378/article/details/127072509

版权

Es6 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

前言

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题，我们会一起来学习防抖和节流函数。

一、认识防抖debounce函数

我们用一副图来理解一下它的过程：

二、使用步骤

1.代码演示

代码如下（示例）：

index.html

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <input type="text">
    <script src="./debounce的基本实现/01_debounce.js"></script>
    <script>
        const inputEl = document.querySelector("input")
        const inputChangeg = function (event) {
            console.log("发送了网络请求！",this,event);
        }
        // 防抖处理:传入两个参数，一个执行的函数，一个延迟的事件
        inputEl.oninput = debounce(inputChangeg,2000)
    </script>
</body>
</html>

js代码

//fn 需要执行的函数
// delay: 需要延迟多长时间
function debounce (fn, delay) {
    // 定义一个定时器，保存上一次的定时器（timer是个数字）
    let timer = null
    // 发生事件，真正执行的函数
    const _debounce = function (...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer)
        //settimeout 会返回一个返回值timer
        // 延迟执行
        timer = setTimeout(() => {
            // 外部传入的真正执行的函数
            fn.apply(this,args)//注意这里有this的绑定与参数的传递
        }, delay);
    }
    return _debounce
}

总结

coderwhy老师讲的debounce的基本使用，注意这里面有this的绑定与参数的传递。

陈吖

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
防抖debounce函数的基本使用

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题，我们会一起来学习防抖和节流函数。coderwhy老师讲的debounce的基本使用，注意这里面有this的绑定与参数的传递。
复制链接

扫一扫