节流 - CSDN

节流

2019-08-13 10:17:57

节流

<!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>节流</title>
    <style>
        #box {
            width: 300px;
            height: 200px;
            background: #ccc;
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
    </style>

</head>

<body>
    <div id="box">0</div>
    <script>

        box.onmousemove = throttle(function () {
            this.innHTML = this.innerHTML++;
        }, 100);


        //1，时间戳来实现 
        // function throttle(func, wait) {
        //     var lastTime = 0;
        //     return function () {
        //         var now = +new Date();//等价于 new Date().getTime();
        //         if (now - lastTime > wait) {
        //             func.apply(this, arguments);
        //             lastTime = now;
        //         }
        //     }

        // }

        // 2，计时器来实现
        function throttle(func, wait) {
            var timer = null;
            return function () {
                var _this = this;
                var argu = arguments;
                if (!timer) {
                    timer = setTimeout(function () {
                        func.apply(_this, argu);
                        timer = null;
                    }, wait)
                }

            }
        }
    </script>
</body>

</html>

收起

展开全文

JavaScript专题（四）节流

万次阅读 多人点赞 2020-08-04 19:30:49

相信当部分开发同学都会遇到节流这个问题，它的答案有很多种，但是想要真的的回答好这个问题却比较难，我们来尝试实现自己可用的节流方法

节流
目录

前言
一、核心和基本实现
二、节流进阶
写在最后

前言
接着《JavaScript专题进阶之防抖》，我们来聊一聊节流——另一个优化函数的思想。
我们还是以移动事件举例
<!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>
    <style>
        #wrapper {
            width: 100%;
            height: 140px;

            background: rgba(0, 0, 0, 0.8);

            color: #fff;
            font-size: 30px;
            font-weight: bold;
            line-height: 140px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="wrapper"></div>

    <script>
        var count = 1;
        function moveAction () {
            oWrapper.innerHTML = count++;
        }

        var oWrapper = document.querySelector('#wrapper');
		oWrapper.onmousemove = moveAction;
    </script>
</body>

</html>

它的效果是这样：

一、核心和基本实现
节流的原理很简单：如果你持续触发某个事件，特定的时间间隔内，只执行一次。
关于节流的实现，有两种主流的实现方式：

时间戳思路
定时器思路

1.1 时间戳思路
顾名思义，通过两个时间戳来控制时间间隔，当触发事件的时候：

我们取出当前的时间戳 now；
然后减去之前执行时的时间戳(首次值为 0 ) prev；
如果大now - prev > wait，证明时间区间维护结束，执行指定事件，更新prev；

根据这一思路，我们就可以实现第一版代码了：
oWrapper.onmousemove = throttle(moveAction, 1000);

function throttle(func, wait) {
    var _this, arg;
    var prev = 0; // 上一次触发的时间，第一次默认为0

    return function () {
        var now = Date.now(); // 触发时的时间
        _this = this;
        if (now - prev > wait) {
            func.apply(_this, arg); // 允许传入参数，并修正this
            prev = now; // 更新上一次触发的时间
        }
    }
}

来看看借助它，效果是什么样的：

我们可以看到：

当鼠标移入的时候，事件立刻执行
每过 1s 会执行一次，且移动2.5s会执行2次，意味着动作停止后不会再执行。

1.2 定时器思路
利用定时器来保证间隔时间内事件的触发次数

创建定时器timer，记录当前是否在周期内；
判断定时器是否存在，若存在则直接结束，否则执行事件；
wait时间之后再次执行，并清掉定时器；

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。
function throttle(func, wait) {
    var _this, arg;
    var timer; // 初始化
    return function () {
        _this = this; // 记录this
        arg = arguments; // 记录参数数组
        if (timer) return; // 时候未到
        timer = setTimeout(() => {
            func.apply(_this, arg); // 允许传入参数，并修正this
            timer = null;
        }, wait);
    }
}

来看看借助它，效果是什么样的：

但是，我们可以看到：

当鼠标移入的时候，事件不会立刻执行;
鼠标定制后wait间隔后会执行一次

1.3 两种思路的区别





时间戳
定时器




“起点”
立即执行
n 秒后执行


“终点”
停止后不会执行
停止会再执行一次


二、节流进阶
结合两种思想完成一个可以立即执行，且停止触发后再执行一次的节流方法：
// 第三版
function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

效果演示如下：

我在看代码的时候，我是反复打印数据才理解为什么会这样做，一起加油～
参考

冴羽大大的Js系列
lodash.js

写在最后
JavaScript系列：

《JavaScript内功进阶系列》（已完结）
《JavaScript专项系列》（持续更新）

关于我

花名：余光（沉迷JS，虚心学习中）
WX：j565017805

其他沉淀

Js版LeetCode题解
前端进阶笔记
我的CSDN博客

如果您看到了最后，对文章有任何建议，都可以在评论区留言～
如果真的对您有所帮助，也希望您能本系列的GitHub仓库，传送门点个star，这是对我最大的鼓励 ！

	时间戳	定时器
“起点”	立即执行	n 秒后执行
“终点”	停止后不会执行	停止会再执行一次

收起

展开全文

JavaScript 前端

(精华)2020年8月18日函数防抖、函数节流
收起
javascript
抖动、防抖、节流、防抖和节流的函数封装简洁版
2020-12-03 09:31:00
节流
```
一、抖动



二、防抖



三、防抖函数封装


四、节流



五、节流的函数封装
```
收起
展开全文
vue.js
vue节流
2020-10-31 08:43:18
Vue节流
```
Vue节流
```
收起
展开全文
函数节流函数节流
2018-05-05 15:47:00
// 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲，如果在执行中，则直接return return; } canRun = false; setTimeout(function(){ ...
收起
函数节流
2019-07-15 23:53:13
函数节流
收起
flutter节流 dart事件节流搜索节流连续触发节流的优化写法
2020-02-26 10:47:59
直接上代码 ...//设置节流周期为390毫秒 Duration durationTime = Duration(milliseconds:390); //事件触发处 ... onChanged:(e){ _timer?.cancel(); _timer = Timer(durationTime, () { ...
收起
防抖节流防抖和节流函数节流函数防抖 debounce throttle
2020-09-11 17:25:35
防抖和节流函数节流和函数防抖，两者都是优化高频率执行js代码的一种方法防抖（debounce）：只要不是最后一次触发就不会发送异步请求（定时器实现）。节流（throttle）：只要第一次请求发送后，响应没回来，就不...
收起
javascript 前端 html css
JS节流和防抖
万次阅读 2019-05-12 16:26:28
首先我们要了解节流和防抖是用来处理什么问题的：待解决问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办。待解决...
收起
防抖节流
2021-01-20 15:14:19
防抖节流认识防抖节流 JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。而对于某些频繁的事件处理会造成性能的损耗，可以通过防抖和节流来限制事件频繁发生为什么需要防抖节流为什么需要...
收起
javascript
js节流
2020-09-20 21:24:16
什么是节流？假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，懒加载呢就是监听滚动条的位置，那么如果用户一直在滚动，那么事件监听就一直在触发，也是浪费性能。那么节流就是在一定时间间隔内...
收起
js
JS 节流
2020-07-03 18:14:13
节流其实和防抖差不多,但是节流是按照时间来确定他访问次数的,在一定的时间内只能访问一次,就差不多和我们现在的获取短信验证码一样,只不过他把这个时间可视化了,告诉你了,节流,我们也可以这样理解老规矩上代码 <...
收起
js
节流模式
2021-01-16 13:38:40
节流模式（Throttle):对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。实现一个节流器 var throttle = function(){ var isClear = arguments[0],fn; if(typeof isClear === 'boolean...
收起
设计模式

节流

JavaScript专题（四）节流

节流

目录

前言

一、核心和基本实现

1.1 时间戳思路

1.2 定时器思路

1.3 两种思路的区别

二、节流进阶

参考

写在最后

(精华)2020年8月18日 函数防抖、函数节流

抖动、防抖、节流、防抖和节流的函数封装简洁版

vue节流

函数节流 函数节流

函数节流

flutter节流 dart事件节流 搜索节流 连续触发节流的优化写法

防抖节流 防抖和节流 函数节流 函数防抖 debounce throttle

JS节流和防抖

防抖节流

js节流

JS 节流

节流模式

节流

NFS 网络文件系统

AIC和RIE法制备的黑硅纳米林

朱老师c++课程第3部分-3.5STL的其他容器讲解

大数据多维分析引擎在魅族的实践

用于文档聚类的半监督概念分解

Golang零基础-->高级编程

使用 Linux 平台充当 Router 路由器

在高密度软件定义的WiFi网络中实现负载平衡

Kubernetes下日志采集、存储与处理技术实践

MMM 集群部署实现 MySQL 高可用和读写分离

PPTP_NNN 服务生产环境实战教程

数据仓库多维数据模型设计

FastDFS 分布式文件系统部署

php、jsp、asp和aspx的区别

Docker从入门到精通

Jenkins软件开发持续集成及自动构建

沿RF锁相辅助的光纤环路链路上任意中间点的精确时延感测和工作台频率分配

图算融合优化示例

JMETER 性能测试基础课程

自适应极限学习机

(精华)2020年8月18日函数防抖、函数节流

函数节流函数节流

flutter节流 dart事件节流搜索节流连续触发节流的优化写法

防抖节流防抖和节流函数节流函数防抖 debounce throttle