<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>封装防抖debounce</title>

    </head>

    <body>

        <input type="text" id="input1">

    </body>

</html>

<script type="text/javascript">

    // 封装防抖

    function debounce(fn, delay = 500) {

        //timer 是闭包中的

        let timer = null

        return function () {

            if(timer) {

                clearTimeout(timer)

            }

            timer = setTimeout(() => {

                fn.apply(this, arguments)

                timer = null

            },delay)

        }

    }

    const input1 = document.getElementById('input1')

    input1.addEventListener('keyup', debounce(function () {

        console.log(input1.value)

    }),600)

</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. [源码解析] NVIDIA HugeCTR，GPU 版本参数服务器 --(9)--- Local hash表

    [源码解析] NVIDIA HugeCTR,GPU 版本参数服务器 --(9)--- Local hash表 目录 [源码解析] NVIDIA HugeCTR,GPU 版本参数服务器 --(9)--- ...

  2. MM32F0020 UART1空闲中断接收

    目录: 1.MM32F0020简介 2.初始化MM32F0020 UART1空闲中断和NVIC中断 3.编写MM32F0020 UART1中断接收和空闲中断函数 4.编写MM32F0020 UART1 ...

  3. 什么是SaaS？

    SaaS的定义 SaaS,是Software-as-a-Service的缩写名称,意思为软件即服务,即通过网络提供软件服务. SaaS平台供应商将应用软件统一部署在自己的服务器上,客户可以根据工作实际 ...

  4. ArcMap操作随记（4）

    1.统计各省份公路长度 [标识]→[汇总]→[视图][创建] 2.用户登录分配 [创建渔网]→[连接] 3.城市超市影响范围 [创建泰森多边形]→[标识]→[汇总] 4.三维可视化分析 [构造视线]→ ...

  5. SSM集成Thymeleaf

    创建项目 Spring+SpringMVC+MyBatis的配置文件 数据库内容 dao层+service层+controller层 映射文件 前端简单页面 配置tomcat,运行显示 总体项目架构 ...

  6. 《前端运维》一、Linux基础--10定时任务

    一.进程管理 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体 ...

  7. Eclipse阿里云镜像源配置

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.什么是Eclipse Eclipse 是一个开放源代码的.基于 Java 的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过 ...

  8. 阿里云开源镜像站支持IPv6访问

    阿里云开源镜像站在国内企业镜像站中率先支持IPv6访问! 点击立即试用https://developer.aliyun.com/mirror/ 同时基于阿里云OpenSearch的搜索能力,开源镜像站 ...

  9. 6月5日 python学习总结 jQuery （二）

    1. 操作样式     对CSS类的操作: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 ...

  10. CodeUp Problem D: More is better

    根据题目意思,输入的每一对A.B都是直接朋友,并且最后只会得到一个集合,该集合就是Mr Wang选择的男孩. 因此很容易写出代码,甚至不需要自己构建一个并查集,只需要使用C++的set模板,每次读入一 ...