<!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. [转载]RabbitMQ消息可靠性分析

    有很多人问过我这么一类问题:RabbitMQ如何确保消息可靠?很多时候,笔者的回答都是:说来话长的事情何来长话短说.的确,要确保消息可靠不只是单单几句就能够叙述明白的,包括Kafka也是如此.可靠并不 ...

  2. python学习第4天

    03 初识列表 why: 字符串的缺点: 1,只能存储少量的数据. 2,s = '1True[1,2,3]' 无论索引,切片 获取的都是字符串类型,单一,转化成它原来的类型还需要再一步转换. int( ...

  3. [C]字符串行为

    未事先分配长度的字符串变量声明,占用内存空间是这个字符串长度 + 1,1用于保存\0结束标识 #include <stdio.h> #include <stdlib.h> #i ...

  4. 进程命令ps/top/kill

    进程: 通俗的说就是 当前正在执行的一个程序 命令: ps 英文: process status 作用: 查看进程的详细状况 选项: a:显示终端上的所有进程,包括其他用户的进程 u:显示进程的详细状 ...

  5. Django makemigrations 不行时

  6. 分布式系统的一致性协议之 2PC 和 3PC

    在分布式系统领域,有一个理论,对于分布式系统的设计影响非常大,那就是 CAP 理论,即对于一个分布式系统而言,它是无法同时满足 Consistency(强一致性).Availability(可用性) ...

  7. DML_DDL_触发器

    Oracle触发器1-介绍Oracle官方参考:PL/SQL Language Referenc->9 PL/SQL TriggerReasons to Use Trigger:■ Automa ...

  8. hbase搭建

    0. 软件版本下载 http://mirror.bit.edu.cn/apache/hbase/   1. 集群环境 Master 172.16.11.97 Slave1 172.16.11.98 S ...

  9. 8 张图帮你一步步看清 async/await 和 promise 的执行顺序（转）

    https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651555491&idx=1&sn=73779f84c289d9 ...

  10. Confluence 6 通过 SSL 或 HTTPS 运行 - 重定向所有的 URLS 到 HTTPS 的安全考虑

    尽管现在 HTTPS 现在已经激活并且可用了.老的 HTTP URLs (http://localhost:8090)还是可以访问的.现在你需要重定向所有 URLs 到他们的 HTTPS 链接中.你可 ...