JS的防抖和截流

作者:神秘网友发布时间:2021-02-26 10:50:04

JS的防抖和截流

```
转载
```
防抖

　　　　　让某个函数在一定事件间隔条件（去抖debounce）或时间间隔条件（节流throttle）下才会去执行，避免快速多次执行函数（操作DOM，加载资源等等）给内存带来大量的消耗从而一定程度上降低性能问题。

　　　　　debounce: 当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

　　　　 debounce使用场景：

1. scroll事件（资源的加载）
2. mouseover事件（拖拽）
3. resize事件（响应式布局）
4. keyup事件（输入框文字停止打字后再进行校验）

　　　　　方法实现：

/**
 * 防反跳。fn函数在最后一次调用时刻的delay毫秒之后执行！
 * @param fn 执行函数
 * @param delay 时间间隔
 * @param isImmediate 为true，debounce会在delay时间间隔的开始时立即调用这个函数
 * @returns {Function}
 */
function debounce(fn, delay, isImmediate) {
  var timer = null;  //初始化timer，作为计时清除依据
  return function() {
    var context = this;  //获取函数所在作用域this
    var args = arguments;  //取得传入参数
    clearTimeout(timer);
    if(isImmediate  timer === null) {
        //时间间隔外立即执行
        fn.apply(context,args);
      timer = 0;
      return;
    }
    timer = setTimeout(function() {
      fn.apply(context,args);
      timer = null;
    }, delay);
  }
}

/* 方法执行e.g. */
var btn = document.getElementById('btn');
var el = document.getElementById('display');
var init = 0;
btn.addEventListener('click', debounce(function() {
  init++;
  el.innerText = init;
}, 1000,true));

截流

　　　　 throttle：预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

　　　　throttle使用场景：　

1. click事件（不停快速点击按钮，减少触发频次）
2. scroll事件（返回顶部按钮出现隐藏事件触发）
3. keyup事件（输入框文字与显示栏内容复制同步）
4. 减少ajax请求，降低请求频率

　　　　方法实现：

/**
 * 创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔delay毫秒调用一次该函数
 * @param fn 执行函数
 * @param delay 时间间隔
 * @returns {Function}
 */
function throttle(fn, delay) {
  var timer = null;
  var timeStamp = new Date();
  return function() {
    var context = this;  //获取函数所在作用域this
    var args = arguments;  //取得传入参数
    if(new Date()-timeStampdelay){
        timeStamp = new Date();
        timer = setTimeout(function(){
        fn.apply(context,args);
      },delay);
    }

  }
}

/* 方法执行 */
var btn = document.getElementById('btn');
var el = document.getElementById('display');
var init = 0;
btn.addEventListener('click', throttle(function() {
  init++;
  el.innerText = init;
}, 1000));

　　或者：

function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
    deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date(),
      args = arguments;
    if (last  now  last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

JS的防抖和截流相关文章

转载-K8S动态更新pod镜像
转载：https://www.jianshu.com/p/8c2eafc46104 kubernetes集群中镜像有三种更新方式，无论哪一种都属于滚动式更新，在更新过程中服务不会中断编辑已存在的yaml文件，使用apply命令更新以nginx镜像为例，查看现有nginx版本 [root@k8s-node2 .ssh]# curl -I
如何生成干净可阅读的汇编代码
转载：如何生成干净可阅读的汇编代码 - 泰晓科技 (tinylab.org) 新版 gcc 默认开启了几个选项，导致学习汇编语言，尤其是入门的同学，很难。以如下代码为例： $ cat demo.c #include stdio.h int main(void) { int i; char buffer[64]; i = 1; buffer[0] =
IO多路复用之select总结（转载）
1、基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取，它就通知该进程。IO多路复用适用如下场合：（1）当客户处理多个描述字时（一般是交互式输入和网络套接口），必须使用I/O复用。（2）当一个客户同时处理多个套接口时，而这种
JavaScript中this的指向
转载地址： https://note.youdao.com/ynoteshare1/index.htmlid=b2fab3b044aa90033395df0c8c9ca3a4type=note 引子在JavaScript中 this 的指向总是让人很困惑，它到底指的啥为了彻底弄清它,我们就来探讨一下吧。 this 在不同的执行环境，不同的用法下会有所
ElasticSearch创建动态索引
转载自：https://www.cnblogs.com/deepSleeping/p/11976262.html 需求：某实例需要按照月份来维护，所以之前的“写死”索引的方式当然不行了。通过百度和看SpringDataElasticSearch官方文档，最后解决了这个问题。关键技术点： Spel表达式（通过调用方法来
程序员 Homebrew 使用指北
转载自：https://sspai.com/post/56009 对于习惯了使用命令来完成一切的程序员来说，安装软件这种小事，自然是能够用命令解决，就不用图形界面选择。但是在 Linux 中，我们有 yum 、 apt 、 dnf 、 pkg 等命令来完成软件的安装，macOS 却并未为我们提供一个
Elasticsearch 之索引别名 alias
转载自：https://my.oschina.net/u/204498/blog/529960 一、 Elasticsearch的别名，就类似数据库的视图。创建别名: 我们为索引my_index创建一个别名my_index_alias,这样我们对my_index_alias的操作就像对my_index的操作一样 POST /_aliases{ "actions": [ {
Java 树形结构数据生成导出excel文件(转载)
转载自https://blog.csdn.net/LZY_1993/article/details/114083456 效果（不上图空谈就是耍流氓）用法 1 String jsonStr = "{\"name\":\"aaa\",\"children\":[{\"name\":\"bbb\",\"children\":[{\"name\":\"eee\"},{\"name\":\"fff\",\"children\":[{\"name
MySQL 事务的隔离级别
转载：https://developer.aliyun.com/article/743691accounttraceid=80d4fddb3dc64b97a71118659e106221tozz 简介：MySQL的事务隔离级别一共有四个，分别是读未提交、读已提交、可重复读以及可串行化。事前准备数据 mysql create table city( - id int(10) a
【转载】Markdown基本语法
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯（英语： John Gruber ）创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后

JS的防抖和截流

JS的防抖和截流

JS的防抖和截流 相关文章

JS的防抖和截流相关文章