Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >函数节流

函数节流

作者头像
用户4344670
发布于 2020-06-28 07:43:28
发布于 2020-06-28 07:43:28
62800
代码可运行
举报
文章被收录于专栏:vue的实战vue的实战
运行总次数:0
代码可运行

函数节流的定义: 规定的单位时间内只执行一次,如果在单位时间内执行了多次,那么最后也只会执行一次。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <div id="div1" draggable="true" >节流函数</div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 //   节流函数
  function throttle(fn, dealy = 100) {
    let timer = null;
    return function() {
      if (timer) {
        return; /// 如果在单位时间内执行了多次,那么最后都会return出去也只会执行一次。
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, dealy);
    };
  }
  let div1 = document.getElementById("div1");
  div1.addEventListener(
    "drag",
    throttle(function(e) {
      console.log(e.offsetX);
    }, 2000)
  );
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
函数节流与防抖
函数防抖,就是指触发事件后在一定时间内函数只能执行一次,如果在这段时间内再次触发,则会重新计时,直到事件触发后一定时间内不再触发
小丞同学
2021/08/16
4880
javascript函数防抖节流,适用于搜索多次触发请求等场景。
可以看到,我们只要输入一个字符,就会触发这次ajax请求。不仅从资源上来说是很浪费的行为,而且实际应用中,用户也是输出完整的字符后,才会请求。下面我们优化一下:
江一铭
2022/06/17
1.3K0
javascript函数防抖节流,适用于搜索多次触发请求等场景。
javaScript 函数节流
什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景:onresize,scroll,mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器,通过设置缓冲时间,在第一次调用时,创建定时器,并在定时时间
用户1097444
2022/06/29
5370
javaScript 函数节流
javaScript 函数节流
IMWeb前端团队
2018/01/08
9810
javaScript 函数节流
【JS】javaScript 函数节流
什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
Ning@
2021/11/10
1.1K0
函数防抖和节流
防抖:不管事件触发频率多高,一定在事件触发 n 秒后才执行,如果在一个事件执行的 n秒内又触发了这个事件,就以新的事件的时间为准,n秒后才执行,总之,触发完事件 n 秒内不再触发事件,n秒后再执行。
木子星兮
2020/07/16
6090
函数去抖(debounce)& 函数节流(throttle)总结
让某个函数在一定 事件间隔条件(去抖debounce) 或 时间间隔条件(节流throttle) 下才会去执行,避免快速多次执行函数(操作DOM,加载资源等等)给内存带来大量的消耗从而一定程度上降低性能问题。
全栈程序员站长
2022/09/06
4K0
函数去抖(debounce)& 函数节流(throttle)总结
函数节流与函数防抖
函数节流与函数防抖 函数节流和函数防抖是一个老生常谈的话题了,两者都是对大量频繁重复调用代码的一种优化方案 今天在某群和大家讨论时,顺便搜了一些相关博客 发现有一篇关于两者的定义竟然写反了。。。所以
贾顺名
2018/04/12
9930
函数节流与函数防抖
函数节流与函数防抖
函数节流与函数防抖的目的都是为了减少用户对服务器不必要的请求次数,以此提高服务器性能的函数。节流是在一段时间内,只向服务器请求一次。防抖则是在频繁触发相同请求时,若任务之间间隔小于指定时间,那么只会执行最后一次请求。
_kyle
2020/08/22
5640
JS函数节流和函数防抖
之所以返回一个函数,因为防抖本身更像是一个函数修饰,所以就做了一次函数柯里化。里面也用到了闭包,闭包的变量是timer。
用户1437675
2019/07/19
1.2K0
js实现函数防抖与节流
节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
蓓蕾心晴
2020/05/25
1.4K0
谈谈JS中的函数节流
好吧,一直在秋招中,都没怎么写博客了。。。今天赶紧来补一补才行。。。我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自《JavaScript高级程序设计》 函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的。例如,DOM 操作比起非DOM 交互需要更多的内存和CPU时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生,
用户1667431
2018/04/18
1.6K0
谈谈JS中的函数节流
js的函数节流、函数防抖及其使用场景
先说函数防抖,他的使用场景最多是在搜索时使用,比如百度的搜索,你在输入文字后的一段时间内开始自动搜索而不是每次按下键都执行一次搜索。因为如果每次按键都搜索,则会消耗大量的服务器资源。
OECOM
2020/07/02
9220
函数节流详解
个人理解 函数节流就是fps(射击)游戏的射速,就算一直按着鼠标射击,也只会在规定射速内射出子弹。
江一铭
2022/06/16
2970
函数节流详解
JavaScript 高频函数优化-函数防抖&函数节流
什么是高频函数? oninput(实时获取输入的数据) onscroll(监听页面的滚动) onresize(监听浏览器可视区域的变化) onmousemove(移动端监听手指在屏幕的滑动) 什么是函
前端小tips
2021/11/24
4020
JavaScript 高频函数优化-函数防抖&函数节流
【面试题】防抖和节流的理解,及其应用场景
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。
用户9914333
2022/07/22
6.3K0
JavaScript函数节流和函数防抖之间的区别
函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。  同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
我是leon
2019/08/28
1.1K0
JavaScript函数节流和函数防抖之间的区别
函数防抖与函数节流
有一些浏览器事件我们不希望它很频繁的触发,如调整窗口大小(onresize)、监听滚动条滚动(onscroll),如果这些监听事件需要调用接口的话一秒内可能会调用上百次,这样坑定是有问题的。
全栈程序员站长
2022/07/21
2120
手动实现函数节流(throttle)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> /* * 函数节流 * 简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,、 * */ <body> <script> function throttle(fn,incomingTime){ let time='' return function()
我乃小神神
2020/05/18
3320
JavaScript中的函数防抖与函数节流
函数防抖(debounce)当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。
刘亦枫
2020/03/19
6090
相关推荐
函数节流与防抖
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验