throttle节流函数

最新推荐文章于 2024-04-04 02:06:39 发布
最新推荐文章于 2024-04-04 02:06:39 发布
阅读量333 收藏
点赞数
分类专栏： js 定时器 节流 文章标签： 函数 节流 性能 计算 throttle
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/power8988/article/details/77542500
版权
js 同时被 3 个专栏收录
113 篇文章 2 订阅
订阅专栏
定时器
5 篇文章 0 订阅
订阅专栏
节流
2 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background:yellow;
            width:100px;
            height:500px;
        }
    </style>
</head>
<body>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, culpa dolor dolorum earum eveniet reprehenderit voluptates. Amet aspernatur consectetur consequatur deserunt est facere molestias non provident quod, reiciendis sint, veritatis?
</div>
<script>
//    window.onresize=function(){
//        var div=document.getElementById("div1");
//        console.log(1);
//        div.style.height=div.offsetWidth+"px"
//    }
//这段非常简单的例子有两个问题可能会造成浏览器运行缓慢：
//首先要计算offsetWidth属性，如果元素或者其他元素有复杂的css样式，那么这个计算可能会很复杂；
//其次，设置元素的高度需要对页面进行回流；
//这里可以使用节流函数，如下例所示：
    function resize(){
        var div=document.getElementById("div1");
        console.log(1);
        div.style.height=div.offsetWidth+"px"
    }
    function throttle(method,context){
        clearTimeout(method.tId);
        method.tId=setTimeout(function(){
            method.call(context);
        },100)
    }
    window.onresize=function(){
        throttle(resize)
    }
    //这样虽然用户不会感觉到变化，但是给浏览器节省的计算量可能会非常大；这里时间设置了100毫秒，具体情况具体分析
</script>
</body>
</html>
liugang0605
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
节流函数-throttle
ZWQ0325的博客
12-22 539
1. 功能 throttle 和防抖一样都是减少高频率执行代码的执行频率。 2.使用场景 oninput onresize onscroll onmousemove onmousehover 等等 3.节流 vs 防抖 防抖：高频执行函数，降低到执行1次 节流：高频执行函数，降低到执行n次，1 < n < 高频次数 3.节流原理 3.1 利用 setTimeout 延迟执行逻辑代码。在防抖的基础上添加变量，降低 clearTimeout 频率，增加执行次数。 let timer =
【vueUse库Utilities模块各函数简介及使用方法--第5篇】
最新发布
xiejunlan的博客
07-31 1189
vueUseUtilities函数useThrottleFn函数介绍使用方法注意事项useTimeoutPoll函数介绍使用方法替代方案useToggle函数介绍使用方法注意事项函数通常接受一个要节流的函数作为参数，并返回一个新的函数。这个新的函数在被连续调用时，会按照指定的时间间隔来执行原始函数，从而避免了在短时间内对原始函数的过度调用。这个函数可能还接受其他可选参数，如时间间隔（默认为一定毫秒数，如1000毫秒）、是否立即执行原始函数等。
函数的节流(throttle)
song17631538490的博客
12-27 1524
浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流操作。我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。通过以上操作就可以实现函数的节流(throttle)。
深入浅出节流函数 throttle
chern1992的博客
06-17 1349
引言 上一节我们详细聊了聊高阶函数之柯里化，通过介绍其定义和三种柯里化应用，并在最后实现了一个通用的 currying 函数。这一小节会继续之前的篇幅聊聊函数节流 throttle，给出这种高阶函数的定义、实现原理以及在 underscore 中的实现，欢迎大家拍砖。 有什么想法或者意见都可以在评论区留言，下图是本文的思维导图，高清思维导图和更多文章请看我的Github。 #定义及解读 函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内无视后来产生的函数调用请求..
节流函数（throttle）
qq_45368052的博客
02-24 363
学习笔记
JavaScript 节流函数 Throttle 详解
10-22
JavaScript中的节流函数Throttle是一种优化技术，用于限制函数的执行频率，特别是在处理与用户交互频繁的事件，如resize、scroll或mousemove时。当事件触发过于频繁，可能会导致性能问题，因为频繁执行的函数可能...
vue组件中节流函数的失效的原因和解决方法
01-18
今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。 节流函数 浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的...
Javascript节流函数throttle和防抖函数debounce
01-18
问题的引出 　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器...在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.j
详解JavaScript节流函数中的Throttle
10-21
JavaScript中的函数节流技术，尤其是Throttle函数，是一种优化策略，用于限制函数的执行频率，以提高性能并避免过度消耗资源。它常被应用于处理高频触发的事件，如`resize`、`scroll`和`mousemove`等。这些事件在...
JavaScript 函数节流（throttle）的实现
热门推荐
Beijiyang
04-06 1万+
函数节流是什么 对于持续触发的事件，规定一个间隔时间（n秒），每隔一段只能执行一次。 上一篇讲的函数防抖（debounce）与本篇说的函数节流（throttle）相似又不同。 函数防抖一般是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。 二者都能防止函数过于频繁的调用。 区别在于，当事件持续被触发，如果触发时间间隔短于规定的等待时间（n秒），那么 ...
JavaScript使用函数实现防抖和节流
前端应知应会
09-16 238
函数防抖(debounce)： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。 使用vue实现防抖操作 <input type="text" class="input" v-model="searchText" @keyup="debounce"/> var timer = undefined debounce: function(){ let that = this if(time
throttle节流
zzz祝晴雨的博客
06-18 133
throttle(method, delay, duration) { let timer = null let begin = new Date().getTime() return function() { let cur = new Date().getTime() clearTimeout(timer) if(cur - begin >= duration) { method() begin = cur } else { timer = setTimeout(function () { me
throttle（节流）
weixin_45437417的博客
09-22 162
节流常应用于鼠标不断点击触发、监听滚动事件 const throttle = (fn, time) => { let flag = true; return function() { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, arguments); flag = true; }, time); } } ...
节流（throttle）
weixin_52148548的博客
06-08 1053
原理：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效代码： 节流的分类 节流分为时间戳和定时器两种。时间戳版：index.html文件： throttle.js文件： 定时器版：index.html文件同上 throttle.js文件： 时间戳和定时器双剑合璧版： index.html文件同上 throttle.js文件： 完整优化版： index.html文件同上 throttle.js文件：...
详解防抖函数（debounce）和节流函数（throttle）
dksks130的博客
12-06 9205
详解防抖函数（debounce）和节流函数（throttle）
节流函数throttle是什么鬼？
weixin_34261739的博客
08-21 413
throttle是什么鬼？ throttle的本意是节流阀，是一种通过改变节流截面或者节流长度来控制液体流量的装置。而在前端开发中，throttle一般用来控制在某段时间间隔内耗时操作只被触发一次。比如说有这样的场景，有个列表，没有所谓的提交操作，用户在点击列表的某一项之后需要通过ajax将用户当前点击的项传给后台进行相应处理，很明显，ajax是个耗时的操作，如果我们直接设置用户点击列表的某项后直...
节流(throttle)
weixin_45113879的博客
04-19 613
节流(throttle) 　指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次… 。节流如字面意思，会稀释函数的执行频率。 // 时间戳版 function throttle(func, wait) { let previous = 0; return function() { let now = Date.now(); let context = this; let args = arguments; if (now -
JS魔法堂：函数节流（throttle）与函数去抖（debounce）
2401_84091938的博客
04-04 1433
如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。接口定义：/**频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay@param delay {number} 延迟时间，单位毫秒@param action {function} 请求关联函数，实际应用需要调用的函数@return {function} 返回客户调用函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liugang0605

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值