美文网首页
javascript的节流与防抖

javascript的节流与防抖

作者: daoqing99 | 来源:发表于2020-04-05 12:03 被阅读0次

函数节流

方法一 时间戳

function throttle(fn, wait) {
  let preTime = 0;
  return () => {
    const now = new Date();
    if (now - preTime > wait) {
      fn();
      preTime = now;
    }
  };
}

方法二 定时器

function throttle(fn, wait) {
  let timer;
  return () => {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        fn();
      }, wait);
    }
  };
}

函数的防抖

function debounce(fn, wait) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(fn, wait);
  };
}

相关文章

  • Javascript 基础

    1、函数防抖和函数节流 【《javascript高级程序设计》里,函数节流是这里讲的函数防抖。】函数防抖: 在事件...

  • 函数节流与函数防抖

    函数节流与函数防抖的区别JS魔法堂:函数节流(throttle)与函数去抖(debounce)函数的防抖与节流 自...

  • JavaScript防抖与节流

    防抖(debounce)和节流(throttle)是在JS中处理高频事件时所作的一些优化操作,从而减轻浏览器负担,...

  • JavaScript的防抖与节流

    函数防抖 函数防抖(debounce):你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发...

  • javascript的节流与防抖

    函数节流 方法一 时间戳 方法二 定时器 函数的防抖

  • 彻底弄懂函数防抖和函数节流

    函数防抖和节流 函数防抖和函数节流:是优化高频率执行的JavaScript代码的一种手段。常用于JavaScrip...

  • 函数防抖和函数节流

    函数防抖和函数节流 函数防抖和函数节流:是优化高频率执行的JavaScript代码的一种手段。常用于JavaScr...

  • JavaScript之节流与防抖

    背景 我们在开发的过程中会经常使用如scroll、resize、touchmove等事件,如果正常绑定事件处理函数...

  • JavaScript 防抖与节流函数

    在项目中有一个需求,侧边栏回到顶部的组件由原来的 页面滚动到一定距离后持续显示 改为 当页面滚动时不显示,页面停止...

  • JavaScript函数防抖与节流

    一、函数防抖 debounce 1、概念 其概念衍生自机械开关和继电器的去弹跳;可以这么理解,一个弹簧片,你一直向...

网友评论

      本文标题:javascript的节流与防抖

      本文链接:https://www.haomeiwen.com/subject/lqquphtx.html