伞仙博客 伞仙博客
首页
  • 前端文章

    • HTML-CSS
    • JavaScript
    • Vue
    • Node
  • Python数据分析
  • Git
  • 博客搭建
  • 其他
设计
  • 友情链接
关于
  • 分类
  • 标签
  • 归档
GitHub

伞仙

我是伞仙
首页
  • 前端文章

    • HTML-CSS
    • JavaScript
    • Vue
    • Node
  • Python数据分析
  • Git
  • 博客搭建
  • 其他
设计
  • 友情链接
关于
  • 分类
  • 标签
  • 归档
GitHub
  • HTML-CSS文章

  • JavaScript文章

    • 函数防抖与函数节流
      • 函数防抖
      • 函数节流
    • 文本选中与复制
    • B KB MB GB的转化方法
    • 前端RSA加密与解密
  • Vue文章

  • Node文章

  • 前端
  • JavaScript文章
伞仙
2019-09-09

函数防抖与函数节流

# 函数防抖与函数节流

# 函数防抖

  • 函数调用n秒后才会执行,如果函数在n秒内被调用的话函数不执行,重新计算执行时间
  • 事件结束后一段时间内才会执行,会有延迟性。
  • 代码实现:
function debounce(method,delay){
    var timer = null;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(context, args);
        }, delay)
    }
}
// 调用,每500毫秒调用执行一次fun
window.onresize = debounce(fun, 500)
1
2
3
4
5
6
7
8
9
10
11
12

# 函数节流

函数预先设定一个执行周期,当调用动作的时刻大于等于执行周期,则开始执行该动作,然后进入下一个新周期

代码实现:

function throttle (method, duration) {
    var begin = new Date();
    return function() {
        var context = this, args = arguments, current = new Date();
        if(current - begin >= duration) {
             method.apply(context, args);
             begin = current;
        }
    }
}
// 调用,如果上一次距离这一次调用有500ms,就执行fun
window.onresize = throttle(fun, 500)
1
2
3
4
5
6
7
8
9
10
11
12

其实,函数的节流和防抖都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段,并没有实质上减少事件的触发次数。

在 GitHub 上编辑此页
#js
上次更新: 2020/09/19, 14:09:00

← a标签的钓鱼漏洞 文本选中与复制 →

最近更新
01
快速注册github账号
01-26
02
解决github图片不显示问题
01-26
03
Git如何删除所有提交历史
01-25
更多文章>
Theme by Vdoing | Copyright © 2020-2021 伞仙 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式