节流throttle函数的基本实现

陈吖

已于 2022-10-11 15:35:13 修改

阅读量206

点赞数

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

于 2022-10-11 15:23:56 首次发布

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

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

Es6

7 篇文章 0 订阅

订阅专栏

文章目录

一、throttle的理解？
二、throttle的逻辑理解？
三、代码

一、throttle的理解？

在这里插入图片描述

二、throttle的逻辑理解？

在这里插入图片描述

三、代码

代码如下（示例）：

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 src="./debounce的立即执行/02_debounce-立即执行.js"></script> -->
    <script src="./throttle的基本使用//throttle-基本使用.js"></script>
    <script>
        const inputEl = document.querySelector("input")
        const inputChangeg = function (event) {
            console.log("发送了网络请求！",this,event);
        }
        // 防抖处理:传入两个参数，一个执行的函数，一个延迟的事件
        // inputEl.oninput = debounce(inputChangeg,2000,true)
        inputEl.oninput = throttle(inputChangeg,3000)
    </script>
</body>
</html>

js代码

function throttle(fn, interval) {
    // 1.记录上一次的开始时间
    let fristTime = 0
    // 2.事件触发时,正真执行的的函数
    const _throttle = function () {
        // 2.1获取当前事件触发时的时间
        const newTime = new Date().getTime()
        // 2.2使用当前触发的时间和之前的时间间隔,以及上一次开始的时间,计算出还剩余多少时间去触发函数
        const remainTime = interval- ( newTime - fristTime )
        if (remainTime <= 0) {
            // 2.3真正触发的函数
            fn()
            // 2.4保留上次触发的时间
            fristTime = newTime
        }
    }
    return _throttle
}