一、函数防抖

1.函数防抖：单位时间内，频繁触发事件，只会触发最后一次。

2.经典场景：实时获取输入框文本--减少触发输入的频率，提高代码的性能

3.防抖流程：

   (1)声明一个全局的timeID存储定时器id。
   (2)每一次触发事件，先清除上一次定时器，以本次触发为准。
   (3)开启本次定时器。

<!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>
    <input type="text" placeholder="请输入文本">
    <script>
      /* 
        1.函数防抖 :  单位时间内，频繁触发事件，只会触发最后一次。
        2.经典应用场景 ： 输入框输入事件。
        3.函数防抖流程 ：
            3.1 声明全局变量存储定时器ID。
            3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中。
      */
      
      //(1)声明一个全局的timeID存储定时器id。
      let timeID = null
      document.querySelector('input').oninput = function(){
          //清除上一次定时器
          clearTimeout(timeID)
          //开启本次定时器. 500ms内用户没有触发，自动执行定时器代码。 
          timeID = setTimeout(()=>{
              console.log(`发送ajax请求,搜索内容为${this.value}`)
          },500)            
        }
    </script>
</body>
</html>

二、函数节流

1.函数节流：单位时间内，频繁触发事件，只会触发一次。

2.应用场景：解决高频事件，频繁触发事件浪费性能。

鼠标移动：onmousemove

滚动条事件：onscroll

3.节流流程

(1)声明一个全局变量记录，本次触发时间。
(2)每一次触发事件的时候，获取当前时间。
(3)判断当前时间 - 上一次触发事件 >= 节流间隔。
(4)存储本次触发事件，用于下一次判断。

<!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>
  <style>
    body{
        width: 3000px;
        height: 3000px;
    }        
  </style>
</head>
<body>
  <script>
     /* 
        1.函数节流 :  单位时间内，频繁触发事件，只会触发一次。
        2.经典应用场景 ： 滚动条事件、鼠标移动。
        3.函数节流流程 ：
            3.1 声明全局变量存储上一次触发交互时间。
            3.2 每一次触发事件, 获取当前时间  与 上一次时间做比较。判断是否超过节流间隔。
            3.3 如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
     */
        
    //(1)声明一个全局变量记录，本次触发时间
    let lastTime = null
    window.onscroll = function(){
      //判断时间间隔
      let currentTime = Date.now()
      if( currentTime - lastTime >= 500 ){
        console.log('执行滚动条事件处理代码')
        //存储本次触发时间
        lastTime = currentTime
      }
    }
  </script>
</body>
</html>

函数防抖与节流(面试+应用)

一、函数防抖

二、函数节流