zoukankan      html  css  js  c++  java
  • 程序的防抖与节流(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('需要传入的参数')

    肖cc QQ2398506993
  • 相关阅读:
    1)BS和CS区别
    109)PHP与oracle网址
    8)对于带有 : 的语句
    将位数较多的数字看成是字符串
    7)杂项没整理
    css中的zoom的使用
    CSS布局一
    ul和ol的一些知识
    css中的display
    css中的content的使用
  • 原文地址:https://www.cnblogs.com/alecc1124/p/14767814.html
Copyright © 2011-2022 走看看