当前位置:首页 > Web开发 > 正文

常用于窗口的resize、scroll

2024-03-31 Web开发

防抖和节流是前端应用开发中常见的两个成果,其道理都是操作闭包,缓存延迟时间。常用于窗口的resize、scroll,输入框内容校验等操纵。

(1)防抖,,思路:在规按时间内未触发第二次,则执行,代码如下

function debounce(fn, delay) {

  let time = null ; //按时器

  delay = delay || 500

  //操作闭包,缓存delay

  return function() {

    let arg = arguments

    if(time) {

      clearTimerOut(time)

    }

        time = setTimerOut(()=>{

      fn.apply(this,arg)

    },delay)

  }

}

(2)节流,当连续触发事件时,保证一按时间段内只挪用一次

  function throttle(fn,delay) {

    let pre = Date.now()

    deley = delay || 500;

    return function(){

      let nowT = Date.now()

      let arg = arguments

      if(nowT  - pre  > = delay ) {

        fn.apply(this ,arg)

        pre = Date.now()

      }

    }

    

  }

js 防抖与节流道理

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31321.html