<!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. Chromium Windows Build

    https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/windows_build_instructions.md ...

  2. 解决excel两表之间数据关联关系，知道这几招就够了

    用过SAP的凭证批量录入模板(Excel文件)的都知道,一个凭证由[抬头]和多个[行项目]组成,这是一个关于excel两表信息关联的典型场景. 这里头蕴藏着一个麻烦:当我们需要一次性录入多个凭证时,如 ...

  3. CTF-sql-group by报错注入

    本文章主要涉及group by报错注入的原理讲解,如有错误,望指出.(附有目录,如需查看请点右下角) 一.下图为本次文章所使用到 user表,该表所在的数据库为 test 二.首先介绍一下本文章所使用 ...

  4. Genymotion安装apk问题,不能部署Genymotion-ARM-Translation_v1.zip

    把Genymotion-ARM-Translation_v1.zip拖进去提示 Files successfully copied to: /sdcard/Download 但还是不能安装apk 解决 ...

  5. 云计算实验二 Docker实验-docker安装

    一.实验目的  1.了解Docker服务安装: 2.掌握Docker镜像操作 二.实验内容 1.Docker服务安装 查看内核版本 uname -r 安装依赖环境: yum install -y yu ...

  6. Collection类集

    1.Collection接口 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection允许相同的 ...

  7. gin中的SecureJSON 防止 json 劫持

    使用 SecureJSON 防止 json 劫持.如果给定的结构是数组值或map,则默认预置 "while(1)," 到响应体. package main import ( &qu ...

  8. SpringBoot整合Nacos自动刷新配置

    目的 Nacos作为SpringBoot服务的注册中心和配置中心. 在NacosServer中修改配置文件,在SpringBoot不重启的情况下,获取到修改的内容. 本例将在配置文件中配置一个 cml ...

  9. mvvm与mvc的定义与区别

    mvvm: 即Model-View-ViewModel(模型-视图-视图模型)的简写. 模型(Model):后端传递的数据 视图(View):即前端渲染的页面 视图模型:是 mvvm 的核心,是连接 ...

  10. elasticsearch查询之大数据集分页查询

    一. 要解决的问题 search命中的记录特别多,使用from+size分页,直接触发了elasticsearch的max_result_window的最大值: { "error" ...