<!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. springboot-jta-atomikos多数据源事务管理

    背景 我们平时在用springboot开发时,要使用事务,只需要在方法上添加@Transaction注解即可,但这种方式只适用单数据源,在多数据源下就不再适用: 比如在多数据源下,我们在一个方法里执行 ...

  2. 微服务7：通信之RPC

    ★微服务系列 微服务1:微服务及其演进史 微服务2:微服务全景架构 微服务3:微服务拆分策略 微服务4:服务注册与发现 微服务5:服务注册与发现(实践篇) 微服务6:通信之网关 微服务7:通信之RPC ...

  3. 1251-Client does not support authentication protocol requested by server; consider upgrading MySQL client。

    三:出现的一个错误在安装完MySQL的时候,我们现在一般都使用Navicat来连接数据库,可惜出现下面的错误:1251-Client does not support authentication p ...

  4. kafka 第一次小整理(草稿篇)————整理一下自己的认知

    前言 简单整理一些自己使用kafka的一些感受. 正文 一切都要回到真实的世界上, 计算机世界只是真实事件的一个缩影. 计算机世界有一个重要的东西,那就是数据库. 数据库记录着真实世界发生了什么,准确 ...

  5. 提升Spring Boot项目中API接口并发能力的一个注解，效果明显

    异步调用几乎是处理高并发Web应用性能问题的万金油,那么什么是"异步调用"?"异步调用"对应的是"同步调用",同步调用指程序按照定义顺序依次 ...

  6. MySQL — 索引

    目录 1.索引概述 2.索引结构 3.索引分类 4.索引语法 5.SQL 性能分析 5.1.执行频次 5.2.慢日志查询 5.3.profile 5.4.explain 6.索引使用规则 6.1.单列 ...

  7. 自动化运维之SaltStack初探

    1.1.基础环境 linux-node1(master服务端) 192.168.31.46 CentOS 6.6 X86_64 linux-node2(minion客户端) 192.168.31.47 ...

  8. [转载]Linux后门整理合集（脉搏推荐）

    我在思考要不要联系下....都禁止转载了.... 简介 利用 Unix/Linux 自带的 Bash 和 Crond 实现远控功能,保持反弹上线到公网机器. 利用方法 先创建 /etc/xxxx 脚本 ...

  9. matplotlib字体

    matplotlib官方文档 https://matplotlib.org/stable/gallery/index.html 使用以下代码查看 import matplotlib.pyplot as ...

  10. Python库国内镜像

    中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ http://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣 http://py ...