程序的防抖与节流(js)

程序的防抖与节流


防抖:
  程序防抖是为了使用户多次发起请求时,某时间内最终只请求最后一次,不影响用户的体验但实现监听请求功能。
    例如 程序设置防抖时间为2秒 用户在第 0秒时请求第一次,在第2秒时本该执行方法,但方法还没执行
    但是 用户在第 1秒时又请求了第二次,此时之前的请求清除,重新刷新定时器,方法在第3秒响应 依次类推

  最经典的案例为:
  1.当前我想要监听input输入框输入事件,我的预想是:用户每次输入后我都请求后台一次数据,当然是使用oninput监听输入动作
  2.但是,如果用户输入的太频繁,会导致服务器压力过大

  此时的解决方法是:
  1.还是让用户请求,但是我只监听用户停下输入动作后的最后一次请求

  实现方法:定时器+闭包

  function debounce(fn, wait) {
    //fn为需要防抖的方法,wait是等待时间   
    var timeout = null;    
    return function(a) {  
      /*如果有新的请求过来了,将清除上一次请求,达到每次只请求最新的那次的目的*/     
      //a为传入fn的参数
      if(timeout !== null) clearTimeout(timeout);  
      timeout = setTimeout(()=>{fn(a)}, wait);    
    }
  }

  调用方法为
fn(a){console.log(a)}//需要被防抖的函数
let b=debounce(fn,1000) //b为新构造的函数 指向debounce内部return的function

b(‘需要传入fn的参数‘)


节流:
程序节流是为了在固定时间内只能请求一次
例如 设置节流的时间为 2秒 用户在第 0秒时请求第一次,程序立马执行,但是在0-2秒的所有请求失效
用户在第 1秒请求第二次,程序不执行
用户在第 3秒请求第三次,程序立马执行,但是在3-5秒时所有请求失效

案例:某页面跳转方法响应为0.2秒,但是用户在急的时候会疯狂点击,此时,我只能让他响应第一次

实现方法:定时器+闭包

function jieliu(fn,wait){
var state=true
//state表示是否可以请求通过
return function(a){
if(state){
//当可以通过时可以进行下面的操作
state=false //关门不让后续的过
fn(a) //执行函数
setTimeout(()=>{
state=true //开门
},wait)
}
}
}

调用方法为:
fn(a){ console.log(a)}//需要节流的函数
let bb=jieliu(fn,1000) //新构造的函数
bb(‘需要传入的参数‘)

程序的防抖与节流(js)

上一篇:Node.js开启服务器


下一篇:解决FastJSON反序列化顺序问题