短视频直播源码开发，防抖和节流的区别和实用场景

在短视频直播源码开发时，要做好防抖和节流，用以提高用户的使用体验。
防抖：是指短视频直播源码中单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。触发高频事件，n秒内事件只会执行一次，如果n秒内再次触发，则会重新计算时间
短视频直播源码防抖的实用场景：
登录发短信按钮，避免用户多次点击发起多次请求
调整浏览器大小 resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存
联想输入法，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。
举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .div1{
                 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: palegoldenrod;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
</html>
<script type="text/javascript">
    // 防抖函数
    function debounce (f, wait) {
      let timer;  // 创建一个标记用来存放定时器的返回值

      return (...args) => {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timer)
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timer = setTimeout(() => {
          f(...args)
        }, wait)
      }
    }
    let count = 0;
    let divEl = document.getElementsByClassName("div1")[0];
    function moveFn(){
        divEl.innerHTML = count++;
    }
    // divEl.addEventListener("click", moveFn,false)
    divEl.addEventListener("click", debounce(moveFn, 1000));
    
</script>

节流：顾名思义，控制水的流量。控制短视频直播源码中事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁timer=timeout; timer=null
短视频直播源码节流的实用场景：
scroll 事件，每隔一秒计算一次位置信息等
浏览器播放事件，每隔一秒计算一次进度信息等
input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)
举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .div1{
                 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: palegoldenrod;
            }
        </style>
    </head>
    <body>
        <button class="addBtn">点击count++</button>
        <span class="count">0</span>
    </body>
</html>
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//节流函数
    function throttle (f, wait) {
      let timer
      return (...args) => {
        if (timer) { return }
        timer = setTimeout(() => {
          f(...args)
          timer = null
        }, wait)
      }
    }
    function addCount(num){
        let initCount = parseInt($(".count").html());
        initCount = initCount+num;
        $(".count").html(initCount);
    }
    /* jq的方式来使用节流代码 */
    $(".addBtn").click(throttle(()=>{addCount(8)}, 2000)) 
    
    
</script>

函数节流不管短视频直播源码事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在短视频直播源码最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理
原文链接：https://www.jianshu.com/p/47c37af00fa4

短视频直播源码开发，防抖和节流的区别和实用场景

相关推荐