美文网首页
防抖和节流

防抖和节流

作者: 两年半练习程序员 | 来源:发表于2021-03-02 13:16 被阅读0次

防抖---触发高频事件后n秒后函数只会执行一次,如果n秒内高频事件再次调用,则重新计算时间:

function debounce(fn){
  let timeout=null;
  //创建一个标记用来存放定时器返回值
  return function(){
  // 每当用户输入的时候把前一个 setTimeout clear 掉
    clearTimeout(timeout);
    timeout=setTimeout(()=>{
      // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
      fn.apply(this, arguments)
    },500)
  }
}
debounce(function(){
  console.log('防抖')
})

节流——高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率。

function throttle(fn){
  let canRun=true;// 通过闭包保存一个标记
  return function(){
      // 在函数开头判断标记是否为 true,不为 true 则 return
      if(!canRun)return;
      canRun=false;// 立即设置为 false
      setTimeout(()=>{
        // 将外部传入的函数的执行放在 setTimeout 中
        fn.apply(this, arguments);
        // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是 false,在开头被 return 掉
        canRun=true;
      },500)
  }
}

相关文章

  • 谈谈js中的节流和防抖函数

    关于节流和防抖,这篇文章说的很好了,深入lodash源码分析防抖和节流深入篇 | Lodash 防抖和节流是怎么实...

  • JavaScript防抖和节流

    1. 认识防抖和节流 1.1. 对防抖和节流的认识 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电...

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • Javascript 基础

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

  • js 防抖 节流

    节流 防抖1 防抖2

  • 2019-03-27

    js的防抖和节流 据我所知防抖和节流都是为了优化作用,减轻浏览器和服务端的负担,防抖和节流俩个的英文要记住: de...

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • 手写防抖和节流函数实现

    1. 认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流...

  • 实现防抖和节流

    一、认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动...

  • 2019-04-24关于节流和防抖

    节流: 应用场景: 防抖: 应用场景: 1.节流 2.防抖

网友评论

      本文标题:防抖和节流

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