视频直播源码,js实现节流和防抖

防抖:

就是指连续触发事件但是在设定的一段时间内中只执行最后后一次,例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又触发了事件,那就会重新开始1000毫秒之后在执行。

记忆核心:重新开始

应用场景:搜索框搜索输入 文本编辑器实时保存


  1.   let timerId = null
      document.querySelector('.int').onkeyup = function(){
        // 防抖
        if(timerId!== null){
          clearInterval(timerId)
        }
        timerId = setTimeout(() => {
          console.log("我是防抖");
        }, 1000);
      }

节流:

就是指连续触发事件但是在设定的一段时间内中只执行一次函数。例如:设定1000毫秒执行,那你在1000毫秒触发在多次,也只在1000毫秒后执行一次

记忆方法:不要打断我

应用场景:高频事件 例如 快速点击,鼠标滑动,resize事件,scroll事件。下拉加载 视频播放等。


  1.   let timerId = null
      document.querySelector('.int').onmouseover = function(){
        // 节流
        if(timerId!== null){
         return
        }
        timerId = setTimeout(() => {
          console.log("我是节流");
          timerId = null
        }, 1000);
      }

其实,我开发一般用lodash库,利用里面的debounce(防抖)和throttle(节流)来做的。

以上就是视频直播源码,js实现节流和防抖, 更多内容欢迎关注之后的文章

视频直播源码,js实现节流和防抖的更多相关文章

  1. 视频直播源码开发中的流媒体协议:rtmp协议

    一.概念与摘要 视频直播源码的RTMP协议从属于应用层,被设计用来在适合的传输协议(如TCP)上复用和打包多媒体传输流(如音频.视频和互动内容).RTMP提供了一套全双工的可靠的多路复用消息服务,类似 ...

  2. 基于vitamio的网络电视直播源码

    这个项目是基于vitamio的网络电视直播源码,也是一个使用了vitamio的基于安卓的网络直播项目源码,可能现在网上已经有很多类似这样的视频播放应用了,不过这个还是相对来说比较完整的,希望这个案例能 ...

  3. 近200篇机器学习&深度学习资料分享(含各种文档,视频,源码等)(1)

    原文:http://developer.51cto.com/art/201501/464174.htm 编者按:本文收集了百来篇关于机器学习和深度学习的资料,含各种文档,视频,源码等.而且原文也会不定 ...

  4. 07 drf源码剖析之节流

    07 drf源码剖析之节流 目录 07 drf源码剖析之节流 1. 节流简述 2. 节流使用 3. 源码剖析 总结: 1. 节流简述 节流类似于权限,它确定是否应授权请求.节流指示临时状态,并用于控制 ...

  5. 带货直播源码开发采用MySQL有什么优越性

    MySQL是世界上最流行的开源关系数据库,带货直播源码使用MySQL,可实现分钟级别的数据库部署和弹性扩展,不仅经济实惠,而且稳定可靠,易于运维.云数据库 MySQL 提供备份恢复.监控.容灾.快速扩 ...

  6. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  7. iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码

    iOS精选源码 APP启动视频 自定义按钮,图片可调整图文间距SPButton 一款定制性极高的轮播图,可自定义轮播图Item的样式(或只... iOS 筛选菜单 分段选择器 仿微信导航栏的实现,让你 ...

  8. android文件管理器源码、斗鱼直播源码、企业级erp源码等

    Android精选源码 文件清理管理器 自定义水平带数字的进度条以及自定义圆形带数字的进度条 利用sectionedRecyclerViewAdapter实现分组列表的recyclerView源码 流 ...

  9. android企业级商城源码、360°全景图VR源码、全民直播源码等

    Android精选源码 [新版]Android技术博客精华汇总 开源了:乐乐音乐5.0-Android音乐播放器 android实现仿真水波纹效果源码 360°全景图VR,这是一个值得把玩的APP a ...

  10. Android 视频 教程 源码 电子书 网址

    资源名称 资源地址 下载量 好评率8天快速掌握Android视频教程67集(附源码)http://down.51cto.com/zt/2197 32157Android开发入门之实战技巧和源码 htt ...

随机推荐

  1. 使用vscode调试ros

    https://blog.csdn.net/u012254599/article/details/106143540/ CMakeLists.txt set(CMAKE_BUILD_TYPE &quo ...

  2. 郁金香 中级班 2.c++的基类和派生类

    生物是基类 老虎是派生类 派生类继承了基类的成员和成员函数 同时this指针 指向的是这个对象所开辟的那个地址

  3. JZOJ 4314. 【NOIP2015模拟11.4】老司机

    题目 思路 大意是构造一个数组使它做 \(01\) 背包能表示出所有给定的数 那就暴力枚举每个位置填什么 直到它能表示出所有给定的数 为了保证时间复杂度 我们考虑一个二进制数 \(s\) 表示能构造出 ...

  4. 比较多普勒超声与临床缓解标准对RA放射学进展的预测效能

    比较多普勒超声与临床缓解标准对RA放射学进展的预测效能 de Miguel, et al. EULAR 2015. Present ID: FRI0586. 原文 译文 FRI0586 DOPPLER ...

  5. slate源码解析(二)- 基本框架与数据模型

    源码架构 首先来看下最核心的slate包下的目录: 可以看到,作为一个开源富文本库,其源码是相当之少.在第一篇文章中说过,Slate没有任何开箱即用的功能,只提供给开发者用于构建富文本所需的最基本的一 ...

  6. Word 设置页眉、页脚、页码

    页眉:在 Word 文档中,每个页面的顶部区域为页眉.常用于显示文档的附加信息,可以插入时间.图形.公司微标.文档标题.文件名或作者姓名等. 页脚:页脚与页眉的作用相同,都可以作为显示文档的附加信息, ...

  7. PostGIS之线性参考

    1. 概述 PostGIS 是PostgreSQL数据库一个空间数据库扩展,它添加了对地理对象的支持,允许在 SQL 中运行空间查询 PostGIS官网:About PostGIS | PostGIS ...

  8. LeetCode-1220 统计元音字母序列的数目

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/count-vowels-permutation 题目描述 给你一个整数 n,请你帮忙统计一下我们 ...

  9. Mybatis plus 查询

    1.子查询 // 管理主管查询 Integer manageSupervisor = query.getManageSupervisor(); if (manageSupervisor != null ...

  10. plesk 关闭维护模式

    最近遇到访问plesk时出现maintanase mode模式,于是网上搜了答案都是老外的,且没有明确怎么解决,但可能造成这一问题的原因也很多,我这个是这么解决的,和大家分享下,希望可以起到一个思路引 ...