资讯专栏INFORMATION COLUMN

js事件节流

APICloud / 761人阅读

摘要:背景在监听浏览器滚动条的事件时该事件会触发很多次,这样当快速滚动时会有很差的性能,所以要限制事件触发的频率,可以防抖和节流,这里我记录简单的节流方法事件节流我是水滴上面判断如果此时距离上次触发达到了某个时间就立刻触发,否则就

背景:在监听浏览器滚动条的scroll事件时该事件会触发很多次,这样当快速滚动时会有很差的性能,所以要限制事件触发的频率,可以防抖和节流,这里我记录简单的节流方法





  
  
  
  事件节流
  



  

  上面判断如果此时距离上次触发达到了某个时间就立刻触发,否则就延迟多少毫秒再触发,这样当持续滚动时代码会在每次滚动结束后一段时间内触发一次,同时也会在时间间隔超过一段时间内执行一次。

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

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

相关文章

  • js 防抖 节流 JavaScript

    摘要:此时需要采用防抖和节流的方式来减少调用频率,同时不影响原来效果。函数防抖当持续触发事件时,一段时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前就触发了事件,延时重新开始。 js 防抖 节流 JavaScript 实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮;如resize事件,对某些自适应页面调整DOM的渲染;如ke...

    int64 评论0 收藏0
  • 前端优化 —— 函数的节流和防抖

    摘要:文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多,因为这些事件的触发是连续性的,需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文 前言 在前端开发当中我们经常会绑定一些事件触发的某些程序执行,有时这些事件会连续触发,如浏览器窗口 s...

    ralap 评论0 收藏0
  • JS专题之节流函数

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

    huaixiaoz 评论0 收藏0
  • 详谈js防抖和节流

    摘要:本文会分别介绍什么是防抖和节流,它们的应用场景,和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。 本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: 没有防抖 ...

    shevy 评论0 收藏0
  • JS进阶篇--JS函数节流(throttle)

    摘要:函数节流的原理函数节流的原理挺简单的,估计大家都想到了,那就是定时器。在高级程序设计一书有介绍函数节流,里面封装了这样一个函数节流函数,它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。 什么是函数节流? 介绍前,先说下背景。在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱...

    cpupro 评论0 收藏0
  • JS函数节流和函数防抖

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

    doodlewind 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<