js jitter and image stabilization and a throttle

 js jitter

　　　Change the window size & scroll up and down scroll bars & repeatedly to enter the content input box ... if the corresponding binding event triggers the frequency of these events is very high, seriously affecting the user experience and performance in the server js, this problem in the js js called jitter.

Workaround: shake & throttle 

js anti-shake

　　Is to set the trigger event in a timer to delay the entry into force of the binding event, and each purge timer trigger event until the entry into force of the two trigger events can trigger interval timer will take effect when binding event (continuous trigger It does not correspond to function only when the trigger will perform two functions corresponding to a certain time interval)

   　< style>

        . mybox {

            width:  600px;

            height:  1500px;

            background-color: pink;

            margin:  0 auto;

        }

    </ style>

</ head>

< body>

    < 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( wait,  func) {

         var  beginTime =  Date. now()

         return  function () {

             var  currentTime =  Date. now()

             var  space =  currentTime -  beginTime

             if ( space >=  wait) {

                 func()

                 beginTime =  Date. now()

            }

        }

    }

     window. onscroll =  throttle( 1000,  fn)

</ script>