什么是函数防抖?

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

实现很简单,大体就是设置一个变量来记录定时器,每次触发事件的时候就看定时器是否存在,如果存在清除一下,然后重新开启一个定时器。时间到了,定时器就执行了。

由于很好理解,直接上代码:

// index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Type Script in Action</title>

    <script src="/src/libs/global-lib.js"></script>

</head>

<body>

    <div class="app"></div>

</body>

</html>
// 脚本文件-使用了Jquery

import $ from "jquery";

$(".app").eq(0).css("width", "200px");

$(".app").eq(0).css("height", "200px");

$(".app").eq(0).css("background", "#ff6600");

$(".app").eq(0).on("mousemove", mouseMoveEvent);

let moveWatcher: null | number = null;

interface nodeEvent {

    target: {

        nodeName: string;

    };

    [key: string]: any;

}

function mouseMoveEvent(event: nodeEvent): void {

    if (moveWatcher) {

        clearTimeout(moveWatcher);

        moveWatcher = null;

    }

    moveWatcher = window.setTimeout(() => {

        console.log(event.target.nodeName);

    }, 1000);

}

到此结束,睡觉

函数防抖-TS实现的更多相关文章

  1. js函数防抖、节流实现

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

  2. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  3. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  4. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

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

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

  6. 函数节流和函数防抖JavaScript实现

    函数节流 function throttle(fn, delay = 1000) { let Running = false; return function () { if (Running) { ...

  7. “浅入浅出”函数防抖（debounce）与节流(throttle)

    函数防抖与节流是日常开发中经常用到的技巧,也是前端面试中的常客,但是发现自己工作一年多了,要么直接复用已有的代码或工具,要么抄袭<JS高级程序设计>书中所述"函数节流" ...

  8. 函数防抖 & 函数节流

    避免一个函数频繁执行 - 避免程序卡顿 js 是单线程的,setTimeout 这样的函数是异步的 异步的代码,交给对应的模块进行处理 模块在会将异步任务,在主线程执行完所有同步代码后,加入事件队列 ...

  9. 微信小程序：防止多次点击跳转（函数节流）和防止表单组件输入内容多次验证（函数防抖）

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生 ...

  10. JS函数防抖与函数节流

    概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...

随机推荐

  1. 27 首页banner文库失效

    安卓app 首页banner文库没有连接功能

  2. MYSQL DQL in 到底会不会走索引&in 范围查询引发的思考。

    前情引子 in 会不会走索引?很多人肯定会回答.废话.如果命中了索引.那肯定会走. 其实我和大多数人一样.一开始也是这么想的.直至有一个血淋淋的案子让我有所改观.有所思考. 背景介绍 业务的工单表.我 ...

  3. Profibus_DP转ModbusTCP网关模块接马保通讯案例

    某工业企业为了提高生产效率和管理水平,决定对其生产线进行智能化改造.在该项目中,利用巴图自动化Profibus_DP转ModbusTCP网关模块(BT-ETHPB20)连接了不同生产设备,实现了设备之 ...

  4. oeasy 教您玩转linux 之010208 满屏乱码 bb

    我们来回顾一下 上一部分我们都讲了什么? 黑客帝国 各种速度颜色参数 最后我们想找一个让人完全崩溃的软件包,这不就来了,话不多说,先试试. apt show bbapt search bbsudo a ...

  5. [oeasy]python0045_四种进制_binary_octal_decimal_hexadecimal

    四种进制 回忆上次内容 上次研究了 通过 八进制数值 转义 \ooo 把(ooo)8进制对应的ascii字符输出 转义序列 \n.\t 是 转义序列 \xhh 也是 转义序列 \ooo 还是 转义序列 ...

  6. C#开源、简单易用的Dapper扩展类库 - Dommel

    前言 今天大姚给大家分享一个C#开源(MIT License).免费.简单易用的Dapper扩展类库,帮助.NET开发者使用Dapper的CRUD操作变得更简单:Dommel. 项目特性 Dommel ...

  7. Python版RNA-seq分析教程：差异表达基因分析

    Bulk RNA-seq 分析的一个重要任务是分析差异表达基因,我们可以用 omicverse包来完成这个任务.对于差异表达分析而言,首先,我们可> 以先将 gene_id 改为 gene_na ...

  8. 18B20的CRC官方讲解

    理解和运用MAXIM IBUTTON产品中的循环冗余校验(CRC) 摘要 : 全部1-Wire器件,包括iButton器件,都具有唯一的8字节注册码,储存在只读存储器(ROM)中.该注册码在1-Wir ...

  9. IDL根据Landsat QA波段去云处理【代码】

    IDL根据Landsat QA波段去云处理[代码] ​ landsat QA波段(质量评估波段)是Landsat卫星影像数据中的一个特殊波段,他在Landsat5-9的每个产品中都存在.虽然我们常用的 ...

  10. 【C3】04 工作原理

    我们已经知道了CSS是做什么的以及怎么写简单的样式这样基础的CSS, 接下来我将了解到浏览器如何获取CSS.HTML和将他们加载成网页. 前置知识: 基础计算机知识.基本软件安装.简单文件知识.HTM ...