防抖与节流

防抖与节流

一、防抖

1）使用原生js实现简单防抖

  <input type="text">
  <script>
    var inp=document.querySelector('input')
    var t=null
    inp.oninput=function(){
      if(t!==null)
      {
        clearTimeout(t)
      }
      t=setTimeout(()=>{
        console.log(this.value);
      },500)
    }
  </script>

2）使用闭包封装防抖函数

  <input type="text">
  <script>
    var inp=document.querySelector('input')
    inp.oninput=debounce(function(){
      console.log(this.value);
    },500)
    function debounce(fn,delay){
      var t=null
      return function(){
        if(t!==null)
        {
          clearTimeout(t)
        }
        t=setTimeout(()=>{
        //call改变this的指向
          fn.call(this)
        },delay)
        }
    }
  </script>

二、节流

1）使用原生js实现简单节流

  body{
      height: 2000px;
      }
 <script>
    var flag=true
    window.onscroll=function(){
      if(flag){
        setTimeout(()=>{
          console.log('123');
          flag=true
        },500)
      }
      flag=false
    }
  </script>

2）使用闭包封装节流函数

  <input type="text">
  <script>
   window.onscroll=throttle(function(){
      console.log('aaa');
    },500)
    function throttle(fn,delay){
      var flag=true
      return function(){
        if(flag){
          setTimeout(()=>{
            fn()
            flag=true
          },delay)
        }
        flag=false
      }
  }
  </script>

使用第三方工具库lodash实现防抖节流

lodash网址：https://www.lodashjs.com/

• 安装

 npm i lodash

• 引入

 import _ from 'lodash'

• 使用

//例子
 //防抖
getList:_.debounce(function() {
  this.getUserList()
},2000),
//节流
getList:_.throttle(function() {
  this.getUserList()
},2000),