<!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. Elasticsearch索引别名、Filtered索引别名、Template

    在使用elasticsearch的时候,经常会遇到需要淘汰掉历史数据的场景. 为了方便数据淘汰,并使得数据管理更加灵活,我们经常会以时间为粒度建立索引,例如: 每个月建立一个索引:monthly-20 ...

  2. java结合testng，利用txt做数据源的数据驱动实例

    import org.testng.annotations.DataProvider; import org.testng.annotations.Test; import java.io.Buffe ...

  3. django配置发送邮箱

    该邮箱配置后台发送邮箱验证使用 settings内配置 # 服务器地址 EMAIL_HOST = 'smtp.163.com' # 端口,邮箱默认动态端口 25 EMAIL_PORT = 25 # 邮 ...

  4. python PIL实现图片合成

    在项目中需要将两张图片合在一起.遇到两种情况,一种就是两张非透明图片的合成, 一种是涉及到透明png的合成. 相关API见 http://pillow.readthedocs.io/en/latest ...

  5. 帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  6. Confluence 6 PostgreSQL 创建数据库和数据库用户

    一旦你成功的安装了 PostgreSQL 数据库: 创建一个数据库用户,例如 confluenceuser. 你的新用户必须能够  创建数据库对象(create database objects) 和 ...

  7. Confluence 6 包括从其他 Confluence 服务器上来的通知

    Confluence workbox 可以显示从 Confluence 服务器上发送过来的消息. 让我们假设你有 2 个 Confluence 服务器, ConfluenceChatty 和 Conf ...

  8. 论文阅读笔记十：DeepLab: Semantic Image Segmentation with Deep Convolutional Nets, Atrous Convolution, and Fully Connected CRFs (DeepLabv2)(CVPR2016)

    论文链接:https://arxiv.org/pdf/1606.00915.pdf 摘要 该文主要对基于深度学习的分割任务做了三个贡献,(1)使用空洞卷积来进行上采样来进行密集的预测任务.空洞卷积可以 ...

  9. mongodb数据中的复制（副本集）

    ---恢复内容开始--- 什么是复制 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性,并可以保证数据的安全性 复制还允许从硬件故障和服务中断中恢复数据 为什么要复制 数据备 ...

  10. python目录和文件的列表清单

    import os # 通过给定的文件夹,列举出这个文件夹当中,所有的文件,以及文件夹,子文件夹当中的所有文件def listFilesToTxt(dir,file): # 1.列举出,当前给定的文件 ...