1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>封装防抖debounce</title>
  6.     </head>
  7.     <body>
  8.         <input type="text" id="input1">
  9.     </body>
  10. </html>
  11.  
  12. <script type="text/javascript">
  13.     // 封装防抖
  14.     function debounce(fn, delay = 500) {
  15.         //timer 是闭包中的
  16.         let timer = null
  17.  
  18.         return function () {
  19.             if(timer) {
  20.                 clearTimeout(timer)
  21.             }
  22.             timer = setTimeout(() => {
  23.                 fn.apply(this, arguments)
  24.                 timer = null
  25.             },delay)
  26.         }
  27.     }
  28.  
  29.     const input1 = document.getElementById('input1')
  30.     input1.addEventListener('keyup', debounce(function () {
  31.         console.log(input1.value)
  32.     }),600)
  33. </script>

手写封装防抖debounce的更多相关文章

  1. 22 道高频 JavaScript 手写面试题及答案

    实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...

  2. [手写系列] Spirit带你实现防抖函数和节流函数

    前言 防抖函数和节流函数,无论是写业务的时候还是面试的时候,想必大家已经听过很多次了吧.但是大家在用到的时候,有了解过他们之间的区别嘛,他们是如何实现的呢?还是说只是简单的调用下像lodash和und ...

  3. <数据结构系列1>封装自己的数组——手写动态泛型数组(简化版ArrayList)

    哈哈,距离上一次写博客已经快过去半个月了,这这这,好像有点慢啊,话不多说,开始我们的手写动态泛型数组 首先是我们自己写一个自己的动态数组类,代码如下所示: public class Array< ...

  4. 几道JS代码手写面试题

    几道JS代码手写面试题   (1) 高阶段函数实现AOP(面向切面编程)    Function.prototype.before = function (beforefn) {        let ...

  5. [JavaScript] 函数节流(throttle)和函数防抖(debounce)

    js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...

  6. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  7. [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北

    网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...

  8. JavaScript 高级系列之节流 [throttle] 与防抖 [debounce]

    一.概念 这两个东西都是为了项目优化而出现的,官方是没有具体定义的,他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题:像这类事件一般像 scroll keyup ...

  9. 常见的JS手写函数汇总（代码注释、持续更新）

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...

随机推荐

  1. ASP.NET Core框架探索(一)

    今天我们来结合源码来探究一下ASP.NET CORE Web框架的运行原理. 可以先整体看一下下面这张基于源码分析过程的一个总结大纲,包含各环节完成的关键步骤: 下面我们将一起来结合源码探索启动一个A ...

  2. chrome浏览器添加JSON插件

    1.下载JSON-Handel插件 1) http://jsonhandle.sinaapp.com 点击下载会将json-handle 插件(crx)下载本地 2.打开Chrome浏览器地址栏输入: ...

  3. 怎么样在手机调试js,jq,html,如何在手机上调试js,javascript

    方法 直接在html中引入vconsole.js文件, 然后在js脚本中使用console.log('调试内容'); 即可看到如下效果,还可以在network里面看到ajax请求 我把js文件传到博客 ...

  4. vue 通信：父子通信、兄弟通信、跨多层通信、vuex状态管理

    之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...

  5. Windows原理深入学习系列-信任等级检查

    这是[信安成长计划]的第 23 篇文章 0x00 目录 0x01 介绍 0x02 逆向分析 Win10_x64_20H2 0x03 WinDBG 0x04 参考文章 在之前的时候,一直以为 SACL ...

  6. Linux环境下安装Maven

    最近在搞虚拟机,记录下虚拟机内Maven环境的搭建流程 一.选择合适的版本(由于Maven运行需要依赖于JDK,所以安装之前需要保证当前虚拟机下已经安装并配置好JDK环境,安装流程参见) https: ...

  7. 通过Geth搭建私有以太坊网络

    前言 为了进一步了解以太坊区块链网络的工作方式和运行原理,笔者通过官方软件Geth搭建了私有以太坊网络fantasynetwork,最终实现了单机和多机节点间的相互连通:首先通过VMware Work ...

  8. 开启路由器的TCP拦截

    TCP拦截即TCP intercept,大多数的路由器平台都引用了该功能,其主要作用就是防止SYN泛洪攻击.SYN攻击利用的是TCP的三次握手机制,攻击端利用伪造的IP地址向被攻击端发出请求,而被攻击 ...

  9. C 如何将输出的地址转化为十进制数

    •需求 这两天在看内存对齐的相关问题,因此产生了一个,如何将地址转换为十进制数? 对于如下程序: void func() { int a = 10; printf("a 的地址为:%p\n& ...

  10. Excel批量转Word

    平时的工作中,尤其是一些文职类工作中,常会遇到这样的问题: 我们有一个Excel文件,每一行都是一个人的信息,需要将每个人的信息填写到Word表格中:一个人,一张表,一个下午,真烦恼. 也是奇想突发, ...