节流 - CSDN

节流
2021-01-08 06:08:17
节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。我们用 leading 代表首次是否执行，trailing 代表结束后是否...
收起

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 前端

函数节流

千次阅读 2019-07-15 23:53:13

函数节流

函数节流
 函数节流是为了解决有时候连续触发某个事件或者连续滚动而频繁的操作DOM以至于浏览器可能奔溃的问题。
 为了绕开这个问题，你可以使用定时器对函数进行节流。
 函数节流的基本思想是：某些代码不可以在没有间断的情况下连续重复执行。
 该模式的基本形式： 
var processor = {
	timeoutId: null,
	performProcessing: function(){
		//实际执行的代码
	},
	//初始处理调用的方法
	process: function(){
		clearTimeout(this.timeoutId);
		var that = this;
		this.timeoutId = function(){
			that.performProcessing();
		}
	}
}
//调用process
processor.process();
 
下面看个示例： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数节流2</title>
</head>
<body>
    <div id='root' style='height:100px;background:red;'>
       root
    </div>
    <script>
        function throttle(method,context){
            clearTimeout(method.tId);
            method.tId = setTimeout(function(){
                method.call(context);
            },100)
        }

        function resizeDiv(){
            var root = document.getElementById('root');
            root.style.height = root.offsetWidth + 'px';
        }
        window.onresize = function(){
            throttle(resizeDiv);
        }
    </script>
</body>
</html>

收起

展开全文

井下智能节流及智能节流器系统开发.rar
2021-09-20 22:37:56
井下智能节流及智能节流器系统开发.rar
收起
井下智能节流及智能节流器系统开发.pdf
2021-09-14 19:53:02
井下智能节流及智能节流器系统开发.pdf
收起
抖动、防抖、节流、防抖和节流的函数封装简洁版
2020-12-03 09:31:00
节流
```
一、抖动
 
 二、防抖
 
 三、防抖函数封装
  
四、节流
 
 五、节流的函数封装
 
```
收起
展开全文
vue.js
vue节流
2020-10-31 08:43:18
Vue节流
```
Vue节流
```
收起
展开全文
JavaScript节流防抖
2021-06-09 15:31:35
js节流防抖 $u.throttle(()=>{ // 节流 },1000) $u.debounce(()=>{ // 防抖 },3000)
收起
JavaScript
防抖节流
2021-09-20 08:32:39
防抖节流1.防抖1.1防抖概念：1.2防抖案例：1.3搜索框节流案例：2.节流2.1节流的概念2.2节流案例2.3节流应用场景3.总结 1.防抖 1.1防抖概念：当事件出发之后，预定单位时间（比如1s）之后执行里面的代码；如果在...
收起
javascript css html
函数节流函数节流
2018-05-05 15:47:00
// 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲，如果在执行中，则直接return return; } canRun = false; setTimeout(function(){ ...
收起
防抖(debounce) 和节流(throttling)
万次阅读 多人点赞 2018-07-05 01:34:50
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。在给DOM绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作...
收起
节流函数
2021-04-09 17:57:22
节流函数就是在单位时间（10s）内随便触发多少次，只要过了单位时间（10s）就会执行一次。应用场景是：用户在输入框内疯狂输入字符串，每经过单位时间就会向后端发起请求查询数据库。节流函数有两种实现方式：1....
收起
js
flutter节流 dart事件节流搜索节流连续触发节流的优化写法
2020-02-26 10:47:59
直接上代码 ...//设置节流周期为390毫秒 Duration durationTime = Duration(milliseconds:390); //事件触发处 ... onChanged:(e){ _timer?.cancel(); _timer = Timer(durationTime, () { ...
收起
节流防抖策略之节流策略
2021-08-30 20:23:00
本章技术分享为节流防抖策略之节流文章目录前言一、节流是什么？二、使用场景三、代码实现总结前言内部原理就是旧的没执行完,新的不让你发(时间间隔由需求决定,例如不同的枪发射子弹的时间间隔不同) 一、节流...
收起
javascript html5 html
js 节流
千次阅读 2018-11-01 15:29:46
节流节流原理：规定时间内只执行一次，它与防抖的最大区别是，即使再高频的动作在规定的时间内都会执行一次。如节流中提到的输入内容进行搜索的问题，使用防抖如果输入特别频繁，则不会发送请求，只有等输入...
收起
JavaScript 节流
2019-09-19 08:43:18
JavaScript 节流用户输入的节流 // An highlighted block <script> function method(med, api, async, data, callback) { var http = new XMLHttpRequest(); if (med == "get") { if (...
收起
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...
收起
设计模式