likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 36

1.1-函数防抖

  • 函数防抖：单位时间内，频繁触发事件，只会触发最后一次
  • 函数防抖实际开发应用场景： 实时获取输入框文本
<!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 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
        */
​
        let timeID = null
        document.querySelector('input').oninput = function(){
            
            //清除上一次定时器
            clearTimeout(timeID)
            //开启本次定时器. 500ms内用户没有触发，自动执行定时器代码。 
            timeID = setTimeout(()=>{
                console.log(`发送ajax请求，搜索内容为${this.value}`)
            },500)            
        }
    </script> 
</body>
</html>

1.2-函数节流

  • 函数节流：单位时间内，频繁触发事件，只会触发一次
  • 函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能

方案一:

<!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 如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
        */
​
        let lastTime = null
        window.onscroll = function(){
            //判断时间间隔
            let currentTime = Date.now()
            if( currentTime - lastTime >= 500 ){
                console.log('执行滚动条事件处理代码')
                //存储本次触发时间
                lastTime = currentTime
            }
        }
    </script>
</body>
</html>

方案二:

<!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>按钮</button>
  <script>
​
    // 定义一个节流阀
    let flag = true
    document.querySelector('button').onclick = function () {
      // 当阀门关闭(flag = false)时,就不执行下面代码
      if (!flag) {
        return
      }
      // 点击后就把阀门关闭,只有定时器执行完毕后,才把阀门打开,达到节流效果,在单位时间里,多次触发只触发第一次
      flag = false
      setTimeout(function () {
        // 要执行的代码
        console.log('ok')
        flag = true
      }, 1000)
    }
​
  </script>
</body>
​
</html>
转载自:https://juejin.cn/post/7102257416078622751
评论
请登录