当前位置:网站首页>防抖函数封装
防抖函数封装
2022-08-04 11:29:00 【要成为光的女人】
在某些场景我们并不需要高频的反馈,毕竟浏览器性能是有限的,不应该浪费在这里。
我们可以在第一次触发事件时,不立即执行函数,而是给出一个期限值,例如3000ms。
- 如果在3000ms 内没有次触发滚动事件,那么就执行函数
- 如果在3000ms 内 在次触发滚动事件,那么当前的计时取消,重新开始计时
效果:如果短时间内大量触发同一事件,只会执行一次函数
//防抖函数封装 参数1:函数 参数2:延时时间
function debounce(fn ,delay){
var timer=null //定义一个timer 为null
return function(){
//如果timer 存在就把它清除掉
if(timer){
clearTimeout(timer)
}
//如果这个timer 不存在就去执行这个函数
timer=setTimeout(fn,delay)
}
}
//使用
//监听窗口滚动事件
window.onscroll=debounce(scrollHandle,3000) //调用这个防抖函数
function scrollHandle(){
var scroolTop=document.documentElement.scrollTo;
}
边栏推荐
猜你喜欢
随机推荐
winform 在Datatable插入一笔数据
linux下数据库初始化密码
上帝空间——全球首个基于Web3.0的艺术协议创意平台,拓宽多元艺术融合边界
【LeetCode】653. 两数之和 IV - 输入 BST
ESP8266-Arduino编程实例-TSL2561亮度传感器驱动
Leetcode brush questions - 543. Diameter of binary trees, 617. Merging binary trees (recursive solution)
Leetcode brush - structure binary tree (105. Once upon a time sequence and the sequence structure binary tree traversal sequence, 106. From the sequence with the sequence structure binary tree travers
使用函数
多表查询
vector中函数emplace_back的实现原理
IBM Q复制新增QSUB
The sword refers to the Great Wall Cannon?Official spy photos of Changan's new pickup
微信公众号之底部菜单
A topic of map
少即是多:视觉SLAM的点稀疏化(IROS 2022)
【LeetCode】701.二叉搜索树中的插入操作
【机器学习】:如何对你的数据进行分类?
强烈推荐一款优秀且通用的后台管理系统
使用.NET简单实现一个Redis的高性能克隆版(二)
ping的原理