JSジッタ及び画像安定化とスロットル

 JSジッタ

   ウィンドウサイズを変更すると上下にスクロールスクロール・バー&繰り返し、対応する結合事象は真剣サーバJSにおけるユーザーエクスペリエンスとパフォーマンスに影響を与え、これらの事象の頻度が非常に高いトリガした場合...コンテンツ入力ボックスを入力するには、このジッタと呼ばれるJSのJSで問題。

回避策:シェイク&スロットル 

JS手ぶれ補正

  イベントをバインドするときに有効になります2つのトリガイベントの発効は、インターバルタイマーをトリガーできるようになるまで、結合事象の発効、および各パージタイマ・トリガ・イベントを遅らせるためにタイマーでトリガーイベントを設定することです(連続トリガトリガーは、特定の時間間隔に対応する二つの機能を実行するときに)のみ機能するように対応していません

    < スタイル >
        mybox  {
            幅:  600PX
            高さ:  1500px ;
            背景色:ピンク;
            マージン:  0  自動;
        }
    </ スタイル >
</ ヘッド >
< 身体 >
    < div  class=" mybox"></ div>
</ body>
< script>
     var  timer;
     window. onscroll =  function () {
         if ( timer) {
             clearTimeout( timer)
        }
         timer =  setTimeout(()  => {
             console. log(' 我滚啦')
        },  1000)
    }
</ script>

 

js的节流

  触发事件时 , 每隔固定时间 执行一次函数

   步骤 : 

      1.进入触发函数中先 获取 一次当前时间 beginTime

      2.返回一个匿名函数

        a.在获取一次当前时间 currentTime

        b.得到两次获取时间的差值 cpace

        c.将space 与间隔时间进行比较 , 如果不小于间隔时间就调用执行函数 , 并且此时获取当前时间赋值给 beginTime

     < style>
       . mybox {
            width:  600px;
            height:  1500px;
            background-color: pink;
            margin:  0 auto;
        }
    </ style>
</ head>

< body>
    < div  class=" mybox"></ div>
</ body>
< script>
     function  fn() {  //执行函数
         console. log(' 我滚啦')
    }
     function  throttle( waitfunc) {
         var  beginTime =  Date. now()
         return  function () {
             var  currentTime =  Date. now()
             var  space =  currentTime -  beginTime
             if ( space >=  wait) {
                 func()
                 beginTime =  Date. now()
            }
        }
    }
     window. onscroll =  throttle( 1000fn)
</ script>

 

おすすめ

転載: www.cnblogs.com/lc-meng/p/11607644.html