<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<button class="btn">点击</button>

		<script src="jquery.min.js"></script>

		<script>

　　　　　　　　　　//按钮点击出发防抖动的函数 debounce

			$(".btn").on("click",debounce(Click,1000))

			function debounce (fn, duration){　　//fn(你要防止抖动的函数) duration:(毫秒数)

				 var timer = null;

				 return function (){

				 	 clearTimeout(timer)

				 	 timer=setTimeout(function(){

				 	 	fn()

				 	 },duration)

				 }

			}
　　　　　　　　　　//你要运行函数

			function Click(){

				console.log(1)

				//todo something

			}

		</script>

	</body>

</html>

　　

函数防抖 debounce的更多相关文章

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

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

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

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

  3. javaScript函数节流与函数防抖

    javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...

  4. JS函数节流和函数防抖问题分析

    问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是 ...

  5. 函数防抖VS函数节流

    (1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: ...

  6. 浅谈JS函数防抖及应用场景

    [前言] 在工作中,我们可能碰到这样的问题: 用户在搜索的时候,在不停敲字,如果每敲一个字我们就要调一次接口,接口调用太频繁,给卡住了. 用户在阅读文章的时候,我们需要监听用户滚动到了哪个标题,但是每 ...

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

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

  8. 函数防抖（Debounce）、函数节流 （Throttle）

    一篇介绍文章:https://zhuanlan.zhihu.com/p/38313717 演示示例:http://demo.nimius.net/debounce_throttle/ 函数防抖(Deb ...

  9. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...

随机推荐

  1. 【原创】大数据基础之Flume（2）Sink代码解析

    flume sink核心类结构 1 核心接口Sink org.apache.flume.Sink /** * <p>Requests the sink to attempt to cons ...

  2. ActiveMQ在Windows下的安装与启动（懒人专属）

    其实这些ActiveMQ官网都有,但是如果你懒得看官网,那就直接看这吧! 1. 官网下载最新的ActiveMQ安装包 apache-activemq-x.x.x-bin.zip并解压   2.进入安装 ...

  3. hive学习05 参数设置

    001参数设置 hive执行命令的本质是mapreduce,当然也可以作为关系型数据库进行查询 --设置一个job有多少个reducer处理,依据多少的是文件的大小,默认1G set hive.exe ...

  4. STM32应用实例十五：STM32的ADC通道间干扰的问题

    最近我们在开发一个项目时,用到了MCU自带的ADC,在调试过程中发现通道之间村在相互干扰的问题.以前其实也用过好几次,但要求都不高所以没有太关注,此次因为物理量的量程较大,所以看到了变化. 首先来说明 ...

  5. Modbus库开发笔记之六：Modbus RTU Master开发

    这一节我们来封装最后一种应用(Modbus RTU Master应用),RTU主站的开发与TCP客户端的开发是一致的.同样的我们也不是做具体的应用,而是实现RTU主站的基本功能.我们将RTU主站的功能 ...

  6. Android 自动化测试框架

    Android常用的自动化测试工具框架: Monkey,MonkeyRunner,UIAutomator,Robotium,Appium,Monkey Talk...... 但这些工具框架都是什么呢有 ...

  7. 【python】查找函数定义

    help(函数名) 举例:想知道gevnet.Timeout这个函数是怎么用的.help(gevent.Timeout). 之前不知道这样查,每次遇到新函数想知道有哪些参数我都要到网上疯狂查阅文档.现 ...

  8. C++ Primer 笔记——变量

    1. 初始化不是赋值,初始化的含义是创建变量时赋予其一个初始值,而赋值的含义是把对象的当前值擦除,而以一个新值来代替. 2.使用列表初始化内置类型的变量时,如果初始值存在丢失信息的风险,则编译器将报错 ...

  9. python 之 列表与字典

    1.4 列表与字典 列表与字典,这两种类型,都是各种类型的集合,以列表为例,如果列表中包含列表,就形成嵌套. 这两种类型几乎是所有python脚本的主要工作组件 . 这种结构信息是可变的可修改的.不像 ...

  10. OpenCV-Python入门教程7-PyQt编写GUI界面

    前面一直都是使用命令行运行代码,不够人性化.这篇用Python编写一个GUI界面,使用PyQt5编写图像处理程序.包括:打开.关闭摄像头,捕获图片,读取本地图片,灰度化和Otsu自动阈值分割的功能. ...