节流函数

最新推荐文章于 2024-04-03 13:08:44 发布
最新推荐文章于 2024-04-03 13:08:44 发布
阅读量207 收藏
点赞数

节流函数：是指能减少触发次数的函数，解决事件频繁触发导致性能下降的问题
实现：一般我们内置一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>throttle</title>
</head>
<body>
    <div style="height:5000px">
        <div id="demo" style="position:fixed;"></div>
    </div>
    <script>
    var COUNT = 0, demo = document.getElementById('demo');
    function testFn() {demo.innerHTML += 'testFN 被调用了 ' + ++COUNT + '次<br>';}

    var throttle = function (fn, delay, atleast) {
        var timer = null;
        var previous = null;

        return function () {
            var now = +new Date();

            if ( !previous ) previous = now;
            if ( atleast && now - previous > atleast ) {
                fn();
                // 重置上一次开始时间为本次结束时间
                previous = now;
                clearTimeout(timer);
            } else {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn();
                    previous = null;
                }, delay);
            }
        }
    };
    window.onscroll = throttle(testFn, 200);
    // window.onscroll = throttle(testFn, 500, 1000);
    </script>
</body>
</html>
xuxu_qkz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
防抖与节流
langmanboy的博客
05-04 2591
防抖与节流 防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费 节流是第一个说了算，后续都会被节流阀屏蔽掉，防抖是最后一个说了算，前面启用的都会被清除 1. 防抖函数 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间 <input type="text"> <script> // 防抖 事件触发 n 秒后执行一次, 如果在 n 秒
详解防抖函数（debounce）和节流函数（throttle）
dksks130的博客
12-06 9063
详解防抖函数（debounce）和节流函数（throttle）
JS高级——节流函数
@SCY
02-26 5221
在某个时间内（比如500ms），某个函数只能被触发一次；过程：当事件触发时，相应的函数并不会立即触发，按照一定的频率去执行默认情况下，我们的防抖函数最后一次是不会执行的因为没有达到最终的时间，也就是条件满足不了的但是，如果我们希望它最后一次是可以执行的，那么我们可以让其传入对应的参数来控制我们来看一下代码如何实现：我们增加了else语句：所以我们可以使用timer变量来记录定时器是否已经开启已经开启的情况下，不需要开启另外一个定时器了else语句表示没有立即执行的情况下，就会开启定时器；
函数节流详解
田兴的博客
11-05 3636
一、什么是函数节流（throttle） 首先函数节流的概念是什么？ 限制一个函数在一定时间内只能执行一次。 举个栗子： 接下来，我给大家举个栗子， 。 二、为什么需要函数节流 前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很
节流函数~
qq_25733937的博客
05-19 921
JavaScript的节流函数。
节流函数的使用
zl960320的博客
08-03 1537
1.什么是节流？节流有什么作用？ 这一篇来讲解什么是节流，节流就是当持续触发事件的时候，保证一定时间内只调用一次事件处理函数，一段时间内只调用一次。 通俗点讲，就是当我们去食堂排队打饭的时候，无论有多少人排队，只有当你前面一个人打完饭之后，才能轮到你打饭，也就是说，在上一个人打饭的这一段时间内，食堂叔叔阿姨只为前一个人服务，当为前一个人服务完之后，才能开始为你服务。这个例子是不是通俗易懂。哈哈哈~~~ 下面言归正传，既然也是一段时间内，所以节流函数里面也需要使用定时器setTimeout,但是这里与防
Vue自定义指令封装节流函数的方法示例
08-27
Vue自定义指令封装节流函数的方法示例 今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...
vue组件中节流函数的失效的原因和解决方法
01-18
今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。 节流函数 浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的...
简单实现节流函数和防抖函数过程解析
10-16
节流函数（Throttle）和防抖函数（Debounce）便是常用的技术手段。节流函数的作用是确保一个函数在一定时间内只执行一次，而防抖函数则是让一个函数在最后一次事件触发后的指定时间内执行，若在这段时间内再次触发...
js防抖函数和节流函数使用场景和实现区别示例分析
10-15
JavaScript中的防抖函数（debounce）和节流函数（throttle）是优化性能的关键工具，它们常用于处理高频触发的事件，如窗口的resize、scroll事件，输入框的input事件等。这些事件如果不加以控制，可能会导致浏览器...
JavaScript 节流函数 Throttle 详解
10-22
JavaScript中的节流函数Throttle是一种优化技术，用于限制函数的执行频率，特别是在处理与用户交互频繁的事件，如resize、scroll或mousemove时。当事件触发过于频繁，可能会导致性能问题，因为频繁执行的函数可能...
函数节流
scorpio的世界
08-10 2848
浏览器中某些计算和处理要比其他的昂贵很多，例如DOM操作、AJAX请求等。 函数节流的基本思想是，某些代码不可以没有间断的情况下连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后 ...
JS中节流函数介绍与实现（秒懂如何手写节流）
百赢出品，必属精品
04-03 1951
它会设置一个时间间隔，只有当两次事件触发的时间间隔超过了这个设定的时间间隔时，才会执行处理函数。如果两次触发事件的时间间隔小于设定的时间间隔，那么处理函数就不会被执行，从而实现了控制函数执行频率的效果。节流函数在实际开发中经常被用来优化高频触发的事件处理，例如在页面滚动、输入框输入等场景下，通过节流来控制函数的执行频率，从而提升页面性能和用户体验。节流函数是一种用于控制函数执行频率的技术。它可以确保函数在一定时间间隔内最多只执行一次，从而避免频繁触发导致性能问题或不必要的资源消耗。基本实现手写防抖函数。
函数节流、函数防抖
m0_57142556的博客
06-17 2290
函数节流、函数防抖 首先，我们要知道：函数节流和函数防抖两个都是优化高频率执行js代码的一种手段。 一、它们的基本概念如下： 函数节流：在一定时间内js方法只跑一次(比如人的眨眼睛，就是一定时间内眨一次)。这是函数节流最形象的解释;函数防抖：指频繁触发的情况下，只有足够的空闲时间，才执行代码一次(比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车)； =================================================
js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 4129
一、函数防抖 二、函数节流
JavaScript第 13 篇，JavaScript节流函数，JavaScript节流功能的应用（JS节流函数，节流功能的应用与解析，深入了解JavaScript节流函数）
热门推荐
weixin_65793170的博客
04-04 1万+
节流就是某一高频事件不断被触发时，将多次执行变成每隔一段时间执行，具体点就是减少一个事件在一段时间内的触发频率，它是一种常用的函数优化技术，可以限制函数的执行频率，从而提高网页的性能和用户体验，这里带你深入了解下JavaScript节流函数的概念、实现原理和应用场景，并提供一些实用的代码示例。
函数的节流(throttle)
song17631538490的博客
12-27 1512
浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流操作。我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。通过以上操作就可以实现函数的节流(throttle)。
全球与中国再生涤纶纱市场现状及未来发展趋势（2024版）.docx
最新发布
08-16
全球与中国再生涤纶纱市场现状及未来发展趋势（2024版）.docx
uniapp 节流函数
06-04
在uniapp中可以使用以下代码实现一个简单的节流函数： ``` /** * 节流函数 * @param {Function} fn 需要节流的函数 * @param {Number} delay 节流时间间隔 */ function throttle(fn, delay) { let lastTime = 0; return function() { const now = new Date().getTime(); if (now - lastTime > delay) { fn.apply(this, arguments); lastTime = now; } }; } ``` 使用方法如下： ``` const handleScroll = throttle(function() { // 需要进行节流的代码 }, 1000); // 监听滚动事件 document.addEventListener('scroll', handleScroll); ``` 在上面的例子中，`handleScroll` 函数会在每次滚动事件触发时被调用，但是由于加入了节流函数，实际上 `handleScroll` 函数会在每隔 1 秒钟才会被调用一次，从而避免了频繁触发函数的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值