摘要:背景在监听浏览器滚动条的事件时该事件会触发很多次,这样当快速滚动时会有很差的性能,所以要限制事件触发的频率,可以防抖和节流,这里我记录简单的节流方法事件节流我是水滴上面判断如果此时距离上次触发达到了某个时间就立刻触发,否则就
背景:在监听浏览器滚动条的scroll事件时该事件会触发很多次,这样当快速滚动时会有很差的性能,所以要限制事件触发的频率,可以防抖和节流,这里我记录简单的节流方法
事件节流
上面判断如果此时距离上次触发达到了某个时间就立刻触发,否则就延迟多少毫秒再触发,这样当持续滚动时代码会在每次滚动结束后一段时间内触发一次,同时也会在时间间隔超过一段时间内执行一次。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108598.html
摘要:此时需要采用防抖和节流的方式来减少调用频率,同时不影响原来效果。函数防抖当持续触发事件时,一段时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前就触发了事件,延时重新开始。 js 防抖 节流 JavaScript 实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮;如resize事件,对某些自适应页面调整DOM的渲染;如ke...
摘要:文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多,因为这些事件的触发是连续性的,需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文 前言 在前端开发当中我们经常会绑定一些事件触发的某些程序执行,有时这些事件会连续触发,如浏览器窗口 s...
摘要:函数节流的原理函数节流的原理挺简单的,估计大家都想到了,那就是定时器。在高级程序设计一书有介绍函数节流,里面封装了这样一个函数节流函数,它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。 什么是函数节流? 介绍前,先说下背景。在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱...
摘要:为什么需要函数防抖和函数节流在浏览器中某些计算和处理要比其他的昂贵很多。函数防抖如果一个事件被频繁触发多次,并且触发的时间间隔过短,则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.为什么需要函数防抖和函数节流? 在浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续尝试进行...
阅读 921·2021-10-13 09:48
阅读 3906·2021-09-22 10:53
阅读 3112·2021-08-30 09:41
阅读 1942·2019-08-30 15:55
阅读 2919·2019-08-30 15:55
阅读 1837·2019-08-30 14:11
阅读 2202·2019-08-29 13:44
阅读 762·2019-08-26 12:23