<!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. JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法

    ### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可 ...

  2. ubuntu18.04安装xmind8

    1.先去官网下载:https://www.xmind.net/download/xmind8/ 2.默认下载到/home/guojihai/下载/目录下然后把xmind-8-update8-linux ...

  3. C#生成不重复的N位随机数

    直接上代码: #region 生成N位随机数 /// <summary> /// 生成N位随机数 /// </summary> /// <param name=" ...

  4. Codeforces 1093E Intersection of Permutations [CDQ分治]

    洛谷 Codeforces 思路 一开始想到莫队+bitset,发现要T. 再想到分块+bitset,脑子一抽竟然直接开始写了,当然也T了. 最后发现这就是个裸的CDQ分治-- 发现\(a\)不变,可 ...

  5. 基于C#net4.5websocket客户端与服务端

    只支持win8以上系统以及windows server2012以上系统 最近在研究视频传输给浏览器,然后使用H5标签解码.视频流采用websocket传输.所以研究了一下C#的websocket. 首 ...

  6. mysql5.7设置简单密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

    注:本文来源于<  mysql5.7设置简单密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy r ...

  7. Confluence 6 诊断

    当你对性能进行诊断或者希望知道是什么原因导致 Confluence 崩溃,你希望知道在 Confluence 内部是什么导致这些问题发生的.这个时候系统的诊断信息能够帮助你获得更多的有关的这些信息. ...

  8. linux命令中的参数前的一横（-）和两横（--）的区别

    在解释这些区别之前我们先了解一下有关linux的背景知识,这个需要大家先认真看完就会对这些区别有更深入的了解,对linux也有更深的了解. 关于System V和BSD风格以及他们与Linux的关系: ...

  9. python+selenium十四：xpath和contains模糊匹配

    xpath可以以标签定位,也可以@任意属性: 如:以input标签定位:driver.find_element_by_xpath("//input[@id='kw']") 如:@t ...

  10. shell 判断目录是否存在

    判断/data/www/logs/wos_log/crontab_log是否, 如果不存在则新建 if [ ! -d "/data/www/logs/wos_log/crontab_log& ...