文档章节

JavaScript函数的防抖和节流

o
 osc_a22drz29
发布于 2019/03/28 17:36
字数 417
阅读 14
收藏 0

防抖

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

思路: 每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
      let timeout = null; // 创建定时器
      return function () {
        clearTimeout(timeout); // 函数每次执行先清掉之前定时器
        timeout = setTimeout(() => { // 再重新创建一个新的定时器,若在定时器结束前这段时间函数再次触发,则会重复上面逻辑,直到函数不再触发,则定时器结束后执行下面代码
          fn.apply(this, arguments);
        }, 500);
      };
    }
    function sayHi()
      console.log('防抖成功');
    }
var input = document.getElementById('input');
input.addEventListener('input', debounce(sayHi)); // 防抖

节流

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

思路: 每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 函数执行前先判断标记的状态,若为false直接终止
        canRun = false; // 走到这里说明之前标记为true,那么本轮函数可以执行,改变标记状态
        fn.apply(this, arguments);
        setTimeout(() => { // 函数执行后在特定时间内状态一直保持false,若再次触发则在上方直接被终止,直到定时器结束,状态被更改为true,可以再次触发
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

简单来说,防抖就是高频触发事件后只执行最后一次,节流是特定时间内只执行第一次

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何在Ruby中生成随机字符串 - How to generate a random string in Ruby

问题: I'm currently generating an 8-character pseudo-random uppercase string for "A" .. "Z": 我目前正在为“ A” ..“ Z”生成一个8个字符的伪随机大写字符串: value = ""; 8.times{......

法国红酒甜
今天
20
0
Python中的mkdir -p功能[重复] - mkdir -p functionality in Python [duplicate]

问题: This question already has an answer here: 这个问题在这里已有答案: How can I safely create a nested directory? 如何安全地创建嵌套目录? 25 answers 25个答案 Is there a way...

技术盛宴
今天
15
0
原价500元的认证证书,限时免费考取!

本文作者:y****n 百度云智学院致力于为百度ABC战略(人工智能、大数据、云计算)提供人才生态体系建设,包括基于百度ABC、IoT的课程体系,整合百度优势技术能力的深度学习技术、Apollo无人车...

百度开发者中心
昨天
17
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
今天
16
0
Python的__init__和self是做什么的? - What __init__ and self do on Python?

问题: I'm learning the Python programming language and I've came across something I don't fully understand. 我正在学习Python编程语言,遇到了一些我不太了解的东西。 In a method ......

javail
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部