JavaScript中函数节流与防抖

  1. 一、函数防抖理解:
  2. 二、函数防抖应用场景:
  3. 三、函数节流理解:
  4. 四、函数节流的应用场景:
  5. 五、节流与防抖相同点和区别:

一、函数防抖理解:

触发完事件 n 秒内不再触发,才执行;如果n秒内事件再次被触发,则重新计算时间
如: 设置某个函数2s钟内只能执行一次,如果2s内实际触发了大于2次,则2秒内不会执行,会等到最后一次触发结束2s后执行;

function debounce(fn,delay = 100){
    // 创建一个标记用来存放定时器的返回值
    let timer = null  
    return function (){
        // 每当事件触发的时候把前一个 setTimeout清除
        if(timer) clearTimer(timer) 
        // 然后又创建一个新的 setTimeout, 这样就能保证时间间隔内如果事件持续触发,就不会执行 fn 函数
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        },delay)
    }
}

二、函数防抖应用场景:

搜索框输入查询,如果用户一直在输入中,没有必要不停地调用去请求服务端接口,等用户停止输入的时候,再调用,设置一个合适的时间间隔,有效减轻服务端压力
scroll 事件滚动触发事件,scroll一直滚动,则不输出,若停止移动,则1S后输出一次
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染


三、函数节流理解:

持续触发事件,每隔一段时间,只执行一次事件(类似于技能冷却时间)
如: 设置某个函数2s钟内只能执行一次,如果2s内实际触发了大于2次,那最多只能执行1次;

function throttle(fn,delay = 100){
  // 通过闭包保存一个标记,相当于一个开关
  let flag = true
  return function () {
    // 在函数开头判断标记定时器是否触发,如果有值return
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, arguments)
      flag = true
    }, delay)
  }
}

四、函数节流的应用场景:

高频点击提交,表单重复提交
搜索联想
DOM 元素的拖拽功能实现
计算鼠标移动的距离


五、节流与防抖相同点和区别:

他们都是可以防止一个函数被无意义的高频率调用
都可以通过使用 setTimeout 实现
函数节流:是确保函数特定的时间内至多执行一次
函数防抖:是函数在特定的时间内不被再调用后执行


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:JavaScript中函数节流与防抖

文章字数:642

本文作者:Spicy boy

发布时间:2021-01-15, 17:03:53

最后更新:2021-03-31, 10:31:45

原始链接:http://www.spicyboy.cn/2021/01/15/JavaScript%E4%B8%AD%E5%87%BD%E6%95%B0%E8%8A%82%E6%B5%81%E4%B8%8E%E9%98%B2%E6%8A%96/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏