大学生必备知识:防抖和节流

1.认识什么是防抖节流和他们的用途？

2.写出来普通的防抖节流

3.用闭包写防抖和节流

1.什么是防抖节流，有哪些用途？

函数防抖:在一定的时间多次触发同一个事件，只执行最后一次的触发效果。

用途:在搜索的时候，用户触发时间过于频繁,只要最后一次事件的 *** 作

函数节流:某个函数在一定时间间隔(例如3秒)只执行一次，在这3秒内，无视后来产生的函数调用请求，也不会延长时间间隔，3秒结束后第一次遇到新的函数调用会触发执行，然后在这新3秒内依旧无视后来产生的调用请求，以此类推...

用途:可以降低一些高频事件的触发例如onscroll等事件

就是用来一段时间只执行一次核心代码的！

2.写普通的防抖节流

2.1 防抖

 //在body标签里面有input标签情况下！！
 var inp = document.querySelector('input')
 var t = null
 inp.oninput = function() {
  //利用计时器来设置防抖  
  if(t!= null)
   {
    clearTimeout(t) //触发新的就清旧的！
   }
   t= setTimeout(()=>{
   console.log(this.value)
   },500) 
}

2.2 节流

//在可以触发onscroll事件的情况下
let flag = true
window.onscroll = function(){
 if(flag)
  {
    setTimeout(()=>{
      flag=true
      console.log('I love you')
    },500)
  }
   flag = false //不管flag是真假都会变成假
}

3.用闭包写防抖节流

3.1闭包写防抖

let inp = document.querySelector('input')
inp.oninput = fangdou(function(){
  console.log(this.value)
},500)

function fangdou(fn,delay){
  let t = null
  //闭包
  return  function(){
    if(t!== null){
     clearTimeout(t)
    }
    t = setTimeout(()=>{
      //这里的this指向input
    fn.call(this) //call是直接调用的！
    },delay)
 }
}

3.2 闭包写节流

  window.onscroll = jieliu(function(){
          console.log('i love you')
  },500)

function jieliu(fn,delay){
 let flag = true
 retrun function(){
   if(flag){
    setTimeout(()=>{
     fn.call(this)
     flag = true
     })
   }
     flag = false
 }}

用来性能优化

今天也在努力学Vue3.0感觉比Vue2.0好用呀！为什么呢！因为看的不乱可能。。。哈哈哈