前端 防抖和节流

1. 防抖

JS的抖动, 指的是, 用户在某种状态下, 会 持续触发 某个事件. 比如滑动滚动条的时候, 会一直触发oncroll事件.

所以我们需要让客户在都抖动停止后, 才执行某些代码, 这就是防抖.

常见需要做防抖的事件类型有: oncroll / onmouseenter / onmousemuve, 等.

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事件, 但是我们每隔1000ms获得一次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>
    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>

你可能感兴趣的:(JavaScript)