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

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

防抖：

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

 

记忆核心：重新开始

 

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

 

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

​

节流：

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

 

记忆方法：不要打断我

 

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

 

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

 

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

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