【前言】

在工作中，我们可能碰到这样的问题：

  • 用户在搜索的时候，在不停敲字，如果每敲一个字我们就要调一次接口，接口调用太频繁，给卡住了。
  • 用户在阅读文章的时候，我们需要监听用户滚动到了哪个标题，但是每滚动一下就监听，那样会太过频繁从而占内存，如果再加上其他的业务代码，就卡住了。

所以，这时候，我们就要用到 防抖与节流 了。

那么，讲到 防抖与节流，我们可以顺带探秘下 重绘与回流。

说起 重绘与回流，我们就顺带把 浏览器输入 URL 后发生的事情 也关注一下，从而引出 DNS、TCP 等知识点，最终串起来构成本文的轮廓，方便 jsliang 和小伙伴们对这块知识的整理与记忆。

【主体】

本节主要介绍函数防抖debounce

下面我们有段防抖小案例代码。

如果小伙伴们手头有电脑，并感兴趣想先自己思考下什么是防抖。可以将代码复制到浏览器，尝试点击按钮，并关注下控制台，看看 Console 是如何打印的。

如果小伙伴们手头没有电脑，那么咱一起先瞅瞅代码实现，再看看下面 GIF 演示。（这样效果没有自己敲的直白有效）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>防抖</title>

</head>

<body>

  <button id="debounce">点我防抖！</button>

  <script>

    window.onload = function() {

      // 1、获取这个按钮，并绑定事件

      var myDebounce = document.getElementById("debounce");

      myDebounce.addEventListener("click", debounce(sayDebounce));

    }

    // 2、防抖功能函数，接受传参

    function debounce(fn) {

      // 4、创建一个标记用来存放定时器的返回值

      let timeout = null;

      return function() {

        // 5、每次当用户点击/输入的时候，把前一个定时器清除

        clearTimeout(timeout);

        // 6、然后创建一个新的 setTimeout，

        // 这样就能保证点击按钮后的 interval 间隔内

        // 如果用户还点击了的话，就不会执行 fn 函数

        timeout = setTimeout(() => {

          fn.call(this, arguments);

        }, );

      };

    }

    // 3、需要进行防抖的事件处理

    function sayDebounce() {

      // ... 有些需要防抖的工作，在这里执行

      console.log("防抖成功！");

    }

  </script>

</body>

</html>

很好，相信小伙伴们已经看完了代码，下面我们看看它的演示：

这时候，我们可以抛出防抖的概念了：

  • 防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

结合上面的代码，我们可以了解到，在触发点击事件后，如果用户再次点击了，我们会清空之前的定时器，重新生成一个定时器。意思就是：这件事儿需要等待，如果你反复催促，我就重新计时！

空讲无益，show you 场景：

  • 有个输入框，输入之后会调用接口，获取联想词。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。

小伙伴们可以尝试看着上面的案例，先自己实现一遍这个场景的解决，如果感觉不行，那就看：《防抖和节流的应用场景和实现》

知识点补充：何为 arguments？
首先，后端转前端的同学，可以将 arguments 理解为能实现重载函数功能的工具。
然后，我们举个例子：在 function test() 这个方法中，由于我们不确定变量有多少，比如 test("jsliang", 24)，又或者 test("LiangJunrong", "jsliang", "24")，这时候只需要在函数 test 中用 arguments 接收就行了。
最后，在 function test() { let arr1 = argument[0] } 中，arr1 就可以获取到传进来的第一个变量。
所以，fn.call(this, arguments) 其实是将不确定变量替换到函数中了。

参考资料 1：《闲聊 JS 中的 apply 和 call》
参考资料 2：《js 中 arguments 的用法》

 
案例2：
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>demo</title>

</head>

<body>

    <input type="text" name="search">

    <script type="text/javascript">

        var searchInput = document.querySelector('input[name="search"]');

        /*绑定事件*/

        searchInput.addEventListener('keyup',debounce(getInputValue),false);

        /* 防抖函数 */

        function debounce(fn){

            var timer = null;

            return function(){

                if(timer){

                    clearTimeout(timer)

                }

                timer = setTimeout(()=>{

                    fn.call(this,arguments)

                },)

            }

        }

        /* 调用获取输入值 */

        function getInputValue(){

            console.dir(this.value)

        }

    </script>

</body>

</html>

.

浅谈JS函数防抖及应用场景的更多相关文章

  1. 浅谈JS函数节流及应用场景

    说完防抖,下面我们讲讲节流,规矩就不说了,先上代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...

  3. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  4. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  5. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  6. 浅谈 js 语句块与标签

    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...

  7. 浅谈JS面向对象

    浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...

  8. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  9. 浅谈JS严格模式

    浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...

随机推荐

  1. linux相关（一）

    一.调整xshell终端显示的最大行数 1.文件 -> 属性 -> 终端,如下图 2.调整缓冲区大小的行数,确定即可,如下图: 注意:此方法只是修改了连接该主机时的显示行数,其他主机的还是 ...

  2. CK：User mode Bus Error(用户空间操作内核地址导致的异常)

    关键词:VEC_ACCESS.coredump.LR.PC等. CK中存在一种VEC_ACCESS异常,可能原因是用户空间访问了内核空间,还有一种是内核访问不存在的总线地址. 下面简单构造VEC_AC ...

  3. list集合优化，泛型的使用以及坼箱和装箱

    1.list vector线程同步,线程安全arraylist的运行速度较快,因为没有使用线程 LlinkedList以链表结构存储数据 2.泛型泛型类 泛型接口 泛型方法 泛型的属性泛型的属性 属性 ...

  4. AtCoder Regular Contest 103

    传送门 C - /\/\/\/ 题意: 给出一个序列\(\{a_i\}\),先要求其满足以下条件: \(a_i=a_{i+2}\) 共有两个不同的数 你现在可以修改任意个数,现问最少修改个数为多少. ...

  5. 【oi模拟赛】长乐中学-不知道多少年

    改造二叉树 [题目描述] 小Y在学树论时看到了有关二叉树的介绍:在计算机科学中,二叉树是每个结点最多有两个子结点的有序树.通常子结点被称作"左孩子"和"右孩子" ...

  6. poj 1852 ants 题解《挑战程序设计竞赛》

    地址  http://poj.org/problem?id=1852 题目描述 Description An army of ants walk on a horizontal pole of len ...

  7. pytorch基础-搭建网络

    搭建网络的步骤大致为以下: 1.准备数据 2. 定义网络结构model 3. 定义损失函数4. 定义优化算法 optimizer5. 训练 5.1 准备好tensor形式的输入数据和标签(可选) 5. ...

  8. 怎么解决 hash 冲突

    开放定址法: 线性探测再散列 二次探测再散列 伪随机 再hash: 同时构造,多个不同的hash函数 链地址: 链表, 建立公共溢出区: 分为基本表和溢出表两个部分 开放散列(open hashing ...

  9. 央行辟谣未发行“DC/EP”和“DCEP” 法定数字货币仍在测试阶段

    http://www.sohu.com/a/354709423_100157595 近期,中国央行再度就法定数字货币发布公告,指出目前系统仍处于研究测试过程中,市场上交易“DC/EP”或“DCEP”均 ...

  10. vue框架学习笔记(vue入门篇)

    vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...