<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>防抖</title>

</head>

<body>

<button id="debounce">防抖，防抖，防抖</button>

<script>

    window.onload = function () {

        let obtn = document.getElementById('debounce'); //获取按钮

        obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件

    }

    //防抖函数

    function debounceHandle (fn) {

        let timer = null;

        return function () {

            clearTimeout(timer); //如果存在事件就清除定时器

            timer = setTimeout(function(){ //如果不存在那么就开启定时器

                fn(this);

            },300)

        }

    }

    //执行函数

    function debounce() {

        console.log('防抖，防抖，防抖');

        //这里写要执行的代码

    }

</script>

</body>

</html>

　　

前端防抖，double click 克星的更多相关文章

  1. Text selection in div(contenteditable) when double click

    背景: 在最近项目中,碰到一个问题:有一个可编辑的div需要双击时可编辑,blur或者回车时将编辑结果保存.你可能注意到双击时,文字会被选中,可编辑区域不会focus到光标位置.考虑到兼容性问题,写了 ...

  2. Implementing On Item Click / Double Click for TListView

    ListView.On Item Click & ListView.On Item Double Click To be able to locate the clicked (if ther ...

  3. [Python學習筆記] 使用 selenium 抓取網頁並且雙擊滑鼠 (double click)

    一開始使用的時候 看官方文件 以為使用 double_click()即可 但後來出現錯誤 AttributeError: 'WebElement' object has no attribute 'd ...

  4. 陈年佳酿之 - Winform ListView 控件 double click 事件中获取选中的row与column

    背景 最近收到了一个关于以前项目的维护请求,那时的楼主还是刚刚工作的小青年~~~ 项目之前使用的是.net/winform.今天重新打开代码,看着之前在FrameWork2.0下面的代码, 满满的回忆 ...

  5. win10家庭版，双击bat文件无法运行（double click bat file does not execute）

    win10家庭版,双击bat文件无法运行,弹出文件打开方式选择框. 在网上搜索处理办法,试了以下方法1-5都没有成功,用方法6规避. 方法1:打开一个驱动器,点“工具-文件夹选项→文件类型→新建→扩展 ...

  6. 纯前端表格控件SpreadJS V12.1 隆重登场，专注易用性，提升用户体验

    ​ 一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...

  7. WPF button 如何区分click和doubleclick

    WPF button 同时处理两个事件时候会先触发click事件,触发doubleclick事件  ,那如何区分呢,可以这样设置: private static DispatcherTimer myC ...

  8. [Reactive Programming] Using an event stream of double clicks -- buffer()

    See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect doubl ...

  9. removing right click context menu options on recycle bin

    Humpty is correct as always  First you might want to make a backup of the reg key then remove the Wa ...

随机推荐

  1. Sentry 开发者贡献指南 - Feature Flag

    功能 flag 在 Sentry 的代码库中声明. 对于自托管用户,这些标志然后通过 sentry.conf.py 进行配置. 对于 Sentry 的 SaaS 部署,Flagr 用于在生产中配置标志 ...

  2. 【Java】Java8新特性

    文章目录 Java8新特性 Lambda表达式的使用 语法格式一:无参,无返回值 语法格式二:Lambda 需要一个参数,但是没有返回值. 语法格式三:数据类型可以省略,因为可由编译器推断得出,称为& ...

  3. Flowable实战（七）用户和组

      在流程中,最重要的参与者是用户.流程定义了任务何时需要用户参与,什么用户可以参与.   组可以理解为我们常说的角色.   Flowable中内置了一套简单的对用户和组的支持,身份管理(IDM ID ...

  4. CesiumJS新增官方TypeScript类型定义

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 在当前的1.70版本中,CesiumJS现在附带了正式的Type ...

  5. [转载]Python 资源大全中文版

    [转载]Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python ...

  6. Selenium&PhantomJS 完成爬取网络代理

    Selenium模块是一套完整的Web应用程序测试系统,它包含了测试的录制(SeleniumIDE).编写及运行(Selenium Remote Control)和测试的并行处理(Selenimu G ...

  7. OrchardCore Headless建站

    说到CMS系统,可能大家都能想起WordPress和Drupal之类的框架,作为.NET爱好者,一般也是知道一些基于.NET的CMS框架的,典型的比如DNN.Umbraco之类的.我很早之前听过Orc ...

  8. MySQL数据类型操作(char与varchar)

    目录 一:MySQL数据类型之整型 1.整型 2.验证不同类型的int是否会空出一个存储正负号 3.增加约束条件 去除正负号(unsigned) 二:浮点型 1.浮点型 2.验证浮点型精确度 三:字符 ...

  9. SQL 语句实战演练

    1 创建数据库.删除数据库 备注:关键字不一定要大写. CREATE DATABASE sql_testDROP DATABASE sql_test 2 新建表 CREATE TABLE `emp` ...

  10. th 表达式的简单使用。

    一.使用场景,页面中,循环遍历,获得控制器穿过来的值. 1.1 控制器 /** * 获得所有的图书信息 * @return */ @RequestMapping("/turnIndexPag ...