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的防抖和截流 相关文章

  1. 转载-K8S动态更新pod镜像

    转载:https://www.jianshu.com/p/8c2eafc46104 kubernetes集群中镜像有三种更新方式,无论哪一种都属于滚动式更新,在更新过程中服务不会中断 编辑已存在的yaml文件,使用apply命令更新 以nginx镜像为例,查看现有nginx版本 [root@k8s-node2 .ssh]# curl -I

  2. 如何生成干净可阅读的汇编代码

    转载:如何生成干净可阅读的汇编代码 - 泰晓科技 (tinylab.org) 新版 gcc 默认开启了几个选项,导致学习汇编语言,尤其是入门的同学,很难。 以如下代码为例: $ cat demo.c #include stdio.h int main(void) { int i; char buffer[64]; i = 1; buffer[0] =

  3. IO多路复用之select总结(转载)

    1、基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取,它就通知该进程。IO多路复用适用如下场合: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口),必须使用I/O复用。 (2)当一个客户同时处理多个套接口时,而这种

  4. JavaScript中this的指向

    转载地址: https://note.youdao.com/ynoteshare1/index.htmlid=b2fab3b044aa90033395df0c8c9ca3a4type=note 引子 在JavaScript中 this 的指向总是让人很困惑,它到底指的啥为了彻底弄清它,我们就来探讨一下吧。 this 在不同的执行环境,不同的用法下会有所

  5. ElasticSearch创建动态索引

    转载自:https://www.cnblogs.com/deepSleeping/p/11976262.html 需求:某实例需要按照月份来维护,所以之前的“写死”索引的方式当然不行了。通过百度和看SpringDataElasticSearch官方文档,最后解决了这个问题。 关键技术点: Spel表达式 (通过调用方法来

  6. 程序员 Homebrew 使用指北

    转载自:https://sspai.com/post/56009 对于习惯了使用命令来完成一切的程序员来说,安装软件这种小事,自然是能够用命令解决,就不用图形界面选择。但是在 Linux 中,我们有 yum 、 apt 、 dnf 、 pkg 等命令来完成软件的安装,macOS 却并未为我们提供一个

  7. Elasticsearch 之索引别名 alias

    转载自:https://my.oschina.net/u/204498/blog/529960 一、 Elasticsearch的别名,就类似数据库的视图。 创建别名: 我们为索引my_index创建一个别名my_index_alias,这样我们对my_index_alias的操作就像对my_index的操作一样 POST /_aliases{ "actions": [ {

  8. 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

  9. MySQL 事务的隔离级别

    转载:https://developer.aliyun.com/article/743691accounttraceid=80d4fddb3dc64b97a71118659e106221tozz 简介:MySQL的事务隔离级别一共有四个,分别是读未提交、读已提交、可重复读以及可串行化。 事前准备数据 mysql create table city( - id int(10) a

  10. 【转载】Markdown基本语法

    Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯(英语: John Gruber )创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词