节流防抖。。。。深入理解

使用第三方库：

lodash ：

debounce

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<button id="btn">发请求</button>
<script>
//    要求： 1秒内，如果多次按下 发起请求，只执行一次
 let btn = document.getElementById('btn')
 let time = ''
 btn.onclick = function (){
     if(time){
        if( new Date() - time < 1000){
            return
        }
     }
      time = new Date()
     setTimeout(
         ()=>{
             console.log('请求成功！')
         },3000
     )
 }

</script>
</body>
</html>

首先理解一下什么是节流，我个人理解是：

　　节流：防止向后端发送请求中，服务器还没有返回结果，再次发送请求。（也就是说：在发起请求后，只有当服务器结果返回，才可以继续发送下次请求）

（防止：同时发送多个相同的请求）

实现：设置一个开关，在发送的时候关闭，等到请求成功，返回结果后，再打开开关

<!DOCTYPE html>
<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>Document</title>
</head>

<body>
      <button id="btn">按钮</button>
      <script>
            let btn = document.getElementById('btn') 
            let canclick = true
            btn.onclick = () => {
                  if (canclick) {
                        canclick = false
                        console.log('发送请求')

                        setTimeout(() => {
                              console.log('请求成功，返回结果')
                              canclick = true
                        }, 3000)

                  }
            }
      </script>
</body>

</html>

　　防抖：防止在极短时间内多次请求响应（比如：在0.5s内，发送三次请求响应，这样做没有必要。）

实现：如果在0.5内一直点击按钮，会清除定时器，只有在点击按钮0.5s后，才会向后端发送请求

<!DOCTYPE html>
<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>Document</title>
</head>

<body>
      <button id="btn">按钮</button>
      <script>
            let btn = document.getElementById('btn')

            let timer
            btn.onclick = () => {
                  if (timer) {
                        clearInterval(timer)
                  }
                  timer = setTimeout(() => {
                        console.log('发送请求')

                        setTimeout(() => {
                              console.log('请求成功，返回结果')
                        }, 3000)

                  }, 500)
            }
      </script>
</body>

</html>

节流 + 防抖：既防止同时发送多个一样的请求，也防止在极短时间内请求响应多次

实现代码如下

<!DOCTYPE html>
<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>Document</title>
</head>

<body>
      <button id="btn">发送请求</button>
      <script>
            // 节流：防止在发送请求中，结果还没返回， 再次发送请求
            // 防抖：防止在极短时间内，不小心多次点击了同一个按钮(防止短时间内请求响应多次)

            let btn = document.getElementById('btn')

            let timer
            let canclick = true
            btn.onclick = () => {
                  if (timer) {
                        clearInterval(timer)
                  }
                  timer = setTimeout(() => {
                        if (canclick) {
                              console.log('发送请求')
                              canclick = false

                              setTimeout(() => {
                                    console.log('请求成功，返回结果')
                                    canclick = true
                              }, 3000)

                        }
                  }, 500)
            }
      </script>
</body>

</html>

节流 防抖。。。。深入理解

节流防抖。。。。深入理解