JS实现函数节流

gplane 发布于2019-08-22 16:44 / 1610人阅读

摘要：函数节流是确保函数特定的时间内至多执行一次。是否节流的开关通过一个闭包来保持对每次函数执行的时间戳的引用立即执行，跳过节流暂停节流恢复节流使用实例

函数节流：是确保函数特定的时间内至多执行一次。
如js滚动事件非常频繁，稍微滚动一下就会触发许多次，如果频繁触发的滚动，每一次都去检查是否到页面底部了再次造成了浪费。于是设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行，执行完毕之后再解锁。这就是函数节流。
实现思路：通过内部使用闭包来缓存上次触发函数的时间戳，然后检验本次函数执行时的时间戳和上次缓存的时间戳之差是否小于传入的时间值参数。

 const restrictFn = (fn, wait) => {
        let stime = 0,
            etime;
        let isPause = false;//是否节流的开关

        function result() {//通过一个闭包来保持对每次函数执行的时间戳的引用
            etime = Date.now();
            if (etime - stime < wait && isPause === false) {
                return;
            } else {
                fn()
            }
            stime = etime;
        }
        result.flash = function () {//立即执行，跳过节流
            fn()
        }
        result.pause = function () {//暂停节流
            isPause = true;
        }
        result.resume = function () {//恢复节流
            isPause = false;
        }
        return result;
    }

使用实例：

    function print() {
        console.log("print something")
    }
    let restrictedPrint = restrictFn(print,1000);

云服务器 GPU云服务器 js函数节流函数节流实现strcmp函数虚函数实现原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94620.html

JS进阶篇3---函数“节流” VS “防抖”

摘要：目的都是为了降低回调函数执行频率，节省计算机资源，优化性能，提升用户体验。函数防抖事件频繁触发的情况下，只有经过足够的空闲时间，才执行代码一次。函数节流和函数防抖的对比分析一、前言前端开发中，函数节流（throttle）和函数防抖（debounce）作为常用的性能优化方法，两者都是用于优化高频率执行 js 代码的手段，那具体它们有什么异同点呢？有对这两个概念不太了解的小伙伴...

hlcc 2019-08-23 18:21 评论0 收藏0
JS专题之节流函数

摘要：一什么是节流节流函数就是让事件处理函数在大于等于执行周期时才能执行，周期之内不执行，即事件一直被触发，那么事件将会按每小段固定时间一次的频率执行。我们通过一个简单的示意来理解节流函数可以用时间戳和定时器两种方式进行处理。本文共 2000 字，读完只需 8 分钟上一篇文章讲了去抖函数，然后这一篇讲同样为了优化性能，降低事件处理频率的节流函数。一、什么是节流？节流函数（thrott...

huaixiaoz 2019-08-23 14:01 评论0 收藏0
JS进阶篇1---函数节流（throttle）

摘要：主要实现思路就是通过定时器，通过设置延时时间，在第一次调用时，创建定时器，写入需要执行的函数。如果这时前一个定时器暂未执行，则将其替换为新的定时器。 JS中的函数节流一、什么是函数节流（throttle）概念：限制一个函数在一定时间内只能执行一次。举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每1...

zhou_you 2019-08-23 18:18 评论0 收藏0
JS之节流和防抖

摘要：节流在指定时间之内，让函数只触发一次。防抖对于一定时间段的连续的函数调用，只让其执行一次。总结以上只是很简单的写了一下节流和防抖的原理，在里，实现起来更加复杂，但是背后的原理核心就是上边代码写的。概述在平时的开发中，经常会听到两个差不多很相近的词。节流（throttle）和防抖（debounce）。这是两个类似又有些不同的优化方案。节流：在指定时间之内，让函数只触发一次。防...

fevin 2019-08-26 17:15 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
JS函数节流和函数防抖

摘要：为什么需要函数防抖和函数节流在浏览器中某些计算和处理要比其他的昂贵很多。函数防抖如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.为什么需要函数防抖和函数节流？在浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续尝试进行...

doodlewind 2019-08-23 13:48 评论0 收藏0