<!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. Linux环境下的Docker的安装和部署、学习二

    DockerFile体系结构(保留字指令) FROM:基础镜像,当前新镜像是基于哪个镜像的 MAINTAINER:镜像维护者的姓名和邮箱地址 RUN:容器构建时需要运行的命令 EXPOSE:当前容器对 ...

  2. RHCSA 第六天

    一.  创建下列用户.组和组成员资格: 1.创建名为 sysmgrs 的组 2.创建用户 natasha 同时指定sysmgrs作为natasha的附加组 3.创建用户 harry 同时指定 sysm ...

  3. 《剑指offer》面试题42. 连续子数组的最大和

    问题描述 输入一个整型数组,数组里有正数也有负数.数组中的一个或连续多个整数组成一个子数组.求所有子数组的和的最大值. 要求时间复杂度为O(n). 示例1: 输入: nums = [-2,1,-3,4 ...

  4. 通过UI库深入了解Vue的插槽的使用技巧

    Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...

  5. 使用PostGIS完成两点间的河流轨迹及流经长度的计算

    基础准备工作 1.PostGIS 的安装 在安装PostGIS前首先必须安装PostgreSQL,然后再安装好的Stack Builder中选择安装PostGIS组件.具体安装步骤可参照 PostGI ...

  6. 【经验总结-markdown】markdown字体和颜色设置

    字体设置 关键词为face <font face = "黑体">我是黑体</font> <font face = "宋体"> ...

  7. 使用Hot Chocolate和.NET 6构建GraphQL应用文章索引

    系列背景 在进入微服务的实践系列之前,我们一起来学习和实践一下.NET应用开发生态中一些比较重要的技术,这个系列就是关于GraphQL在.NET 6应用中的实现. 系列导航 使用Hot Chocola ...

  8. golang中channel讲解

    1. 无缓冲通道 2. 有缓冲通道 有缓冲通道特点:当channel已经满,在向里面写数据就会阻塞,当channel已经为空,在从里面读数据就会阻塞. 3. 关闭channel package mai ...

  9. gin中multipart/urlencoded绑定

    package main import ( "fmt" "github.com/gin-gonic/gin" "net/http" ) ty ...

  10. Java多线程专题6: Queue和List

    合集目录 Java多线程专题6: Queue和List CopyOnWriteArrayList 如何通过写时拷贝实现并发安全的 List? CopyOnWrite(COW), 是计算机程序设计领域中 ...