精华内容
下载资源
问答
  • 节流

    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. 时间戳思路
    2. 定时器思路

    1.1 时间戳思路

    顾名思义,通过两个时间戳来控制时间间隔,当触发事件的时候:

    1. 我们取出当前的时间戳 now
    2. 然后减去之前执行时的时间戳(首次值为 0 ) prev
    3. 如果大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; // 更新上一次触发的时间
            }
        }
    }
    

    来看看借助它,效果是什么样的:

    在这里插入图片描述

    我们可以看到:

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

    1.2 定时器思路

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

    1. 创建定时器timer,记录当前是否在周期内;
    2. 判断定时器是否存在,若存在则直接结束,否则执行事件;
    3. 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);
        }
    }
    

    来看看借助它,效果是什么样的:

    在这里插入图片描述

    但是,我们可以看到:

    1. 当鼠标移入的时候,事件不会立刻执行;
    2. 鼠标定制后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;
    }
    

    效果演示如下:

    在这里插入图片描述

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

    参考

    写在最后

    JavaScript系列:

    1. 《JavaScript内功进阶系列》(已完结)
    2. 《JavaScript专项系列》(持续更新)

    关于我

    • 花名:余光(沉迷JS,虚心学习中)
    • WX:j565017805

    其他沉淀

    如果您看到了最后,对文章有任何建议,都可以在评论区留言~

    如果真的对您有所帮助,也希望您能本系列的GitHub仓库,传送门点个star,这是对我最大的鼓励 !

    展开全文
  • 节流

    一、抖动
    在这里插入图片描述
    二、防抖
    在这里插入图片描述
    三、防抖函数封装
    在这里插入图片描述

    四、节流
    在这里插入图片描述
    五、节流的函数封装
    在这里插入图片描述

    展开全文
  • 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
    函数节流
  • 直接上代码 ...//设置节流周期为390毫秒 Duration durationTime = Duration(milliseconds:390); //事件触发处 ... onChanged:(e){ _timer?.cancel(); _timer = Timer(durationTime, () { ...
  • 防抖和节流 函数节流和函数防抖,两者都是优化高频率执行js代码的一种方法 防抖(debounce):只要不是最后一次触发就不会发送异步请求(定时器实现)。 节流(throttle):只要第一次请求发送后,响应没回来,就不...
  • JS节流和防抖

    万次阅读 2019-05-12 16:26:28
    首先我们要了解节流和防抖是用来处理什么问题的: 待解决问题1: 如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办。 待解决...
  • 防抖节流

    2021-01-20 15:14:19
    防抖节流 认识防抖节流 JavaScript是事件驱动的,大量的操作会触发事件,加入到事件队列中处理。而对于某些频繁的事件处理会造成性能的损耗,可以通过防抖和节流来限制事件频繁发生 为什么需要防抖节流 为什么需要...
  • js节流

    2020-09-20 21:24:16
    什么是节流? 假如在一个页面中有任意多张图片,那么就有可能会使用懒加载技术,懒加载呢就是监听滚动条的位置,那么如果用户一直在滚动,那么事件监听就一直在触发,也是浪费性能。那么节流就是在一定时间间隔内...
  • JS 节流

    2020-07-03 18:14:13
    节流其实和防抖差不多,但是节流是按照时间来确定他访问次数的,在一定的时间内只能访问一次,就差不多和我们现在的获取短信验证码一样,只不过他把这个时间可视化了,告诉你了,节流,我们也可以这样理解 老规矩上代码 <...
  • 节流模式

    2021-01-16 13:38:40
    节流模式(Throttle):对重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作,以提高性能。 实现一个节流器 var throttle = function(){ var isClear = arguments[0],fn; if(typeof isClear === 'boolean...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,849
精华内容 3,939
关键字:

节流