先端のぶれと節流を防ぎます.

16042 ワード

JavaScript

1.手ぶれ防止
JSのジッタとは、ユーザーがある状態で、あるイベントを指します.例えば、スクロールバーをスライドさせる時に、oncrollイベントがずっとトリガされます.
ですから、私達はお客様にすべてのジッタを停止させてから、いくつかのコードを実行します.
よくあるのは震え防止のイベントタイプがあります.oncroll/onmouseer/onmousemoveなどです.
ex:oncroll事件を例にして


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>  title>
  <style>
    .div {
      height: 2000px;
    }
  style>
head>
<body>
  <div class="div">div>
  <script>
    //         
    //   2   :          
    function fangdou (time, callback) {
      var timer  //   timer       
      return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
          callback()
        }, time)
      }
    }
    
    window.onscroll = fangdou(500, () => {
      console.log('onscroll')
    })
  script>
body>
html>

2.スロットル
節流とは、ある場面によってはユーザのある状態において、あるイベントの結果を持続的に獲得する必要があるため、ユーザにこのイベントを継続的にトリガさせることはできない.
ex:以下はやはりoncroll事件を例にしています.ユーザーがスクロールバーを上に引っ張る時と下に引っ張る時は、ずっとoncroll事件を触発しますが、私達は1000 msごとにOcrollイベントの結果を得ます.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>  title>
  <style>
    body {
      height: 2000px;
    }
  style>
head>
<body>
  <script>
    //      
    // function jieliu () {
    //   var beginTime = Date.now()
    //   var timer
    //   return function () {
    //     clearTimeout(timer)
    //     var space = Date.now() - beginTime
    //     if (space >= 1000) {
    //       console.log('onscroll')
    //       beginTime = Date.now()
    //     } else {
    //       timer = setTimeout(() => {
    //         console.log('onscroll, end')
    //       }, 1000)
    //     }
    //   }
    // }

    //          
    function jieliu (time, callback) {
      var beginTime = Date.now()
      var timer
      return function () {
        clearTimeout(timer)
        var space = Date.now() - beginTime
        if (space >= time) {
          callback()
          beginTime = Date.now()
        } else {
          timer = setTimeout(() => {
            callback()
          }, time)
        }
      }
    }

    window.onscroll = jieliu(1000, () => {
      console.log('onscroll')
    })

    // window.onscroll = function () {
    //   console.log('onscroll')
    // } 
  script>
body>
html>

イベント依頼とは?