视频直播源码,js实现节流和防抖
2024-10-20 08:43:22
视频直播源码,js实现节流和防抖
防抖:
就是指连续触发事件但是在设定的一段时间内中只执行最后后一次,例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又触发了事件,那就会重新开始1000毫秒之后在执行。
记忆核心:重新开始
应用场景:搜索框搜索输入 文本编辑器实时保存
let timerId = null
document.querySelector('.int').onkeyup = function(){
// 防抖
if(timerId!== null){
clearInterval(timerId)
}
timerId = setTimeout(() => {
console.log("我是防抖");
}, 1000);
}
节流:
就是指连续触发事件但是在设定的一段时间内中只执行一次函数。例如:设定1000毫秒执行,那你在1000毫秒触发在多次,也只在1000毫秒后执行一次
记忆方法:不要打断我
应用场景:高频事件 例如 快速点击,鼠标滑动,resize事件,scroll事件。下拉加载 视频播放等。
let timerId = null
document.querySelector('.int').onmouseover = function(){
// 节流
if(timerId!== null){
return
}
timerId = setTimeout(() => {
console.log("我是节流");
timerId = null
}, 1000);
}
其实,我开发一般用lodash库,利用里面的debounce(防抖)和throttle(节流)来做的。
以上就是视频直播源码,js实现节流和防抖, 更多内容欢迎关注之后的文章
最新文章
- Cheat sheets
- 【python游戏编程之旅】第六篇---pygame中的Sprite(精灵)模块和加载动画
- 进程状态转换、CPU调度算法
- POJ 4046 Sightseeing 枚举+最短路 好题
- FZU 2016 summer train I. Approximating a Constant Range 单调队列
- 使用RMAN迁移文件系统数据库到ASM
- ANDROID_MARS学习笔记_S01原始版_023_MP3PLAYER005_用广播BroacastReciever实现后台播放不更新歌词
- JSTL-core核心代码标签库中的forEach,remove, forTokens,choose,when,otherwise,redirect 标签
- 【单页应用】view与model相关梳理(转载)
- RedHat7上安装MariaDB
- XML的四种解析器原理及性能比较
- 交互设计师谈颠覆式创新 | Think different
- KMP算法之从next[]到nextVal[]
- hashMap遍历方式
- 【面试题】由HashMap引发的一系列追问
- CImage 对话框初始化时候显示透明 PNG
- CSS选择器之基本选择器总结
- Go语言二叉树定义及遍历算法实现
- vue 动态加载组建
- sqler sql 转rest api 源码解析(四)macro 的执行