<!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. GO 新开发者要注意的陷阱和常见错误

    转自:http://colobu.com/2015/09/07/gotchas-and-common-mistakes-in-go-golang/ 初级 开大括号不能放在单独的一行 未使用的变量 未使 ...

  2. .NET基础之this关键字

    1.限定类似名称隐藏的成员 public Employee(string name, string alias) { // Use this to qualify the fields, name a ...

  3. 【原创】编程基础之Ruby

    ruby2.6.2 官方:https://www.ruby-lang.org/en/ 一 简介 A dynamic, open source programming language with a f ...

  4. js设置睡眠N秒后再执行

    function sleep(NumMillis) { var nowTime = new Date(); var exitTime = nowTime .getTime() + NumMillis; ...

  5. 腾讯云CVM之间配置免密钥登录

    背景: 1客户A和B俩台主机之间需要实现免密钥登录,已绑定腾讯云申请的密钥对 系统:centos7.3 A:192.168.0.100 B:192.168.0.84 A主机的私钥文件:aaa B主机的 ...

  6. noj算法 装载问题 回溯法

    描述: 有两艘船,载重量分别是c1. c2,n个集装箱,重量是wi (i=1…n),且所有集装箱的总重量不超过c1+c2.确定是否有可能将所有集装箱全部装入两艘船. 输入: 多个测例,每个测例的输入占 ...

  7. hdu2602 Bone Collector 01背包

    Many years ago , in Teddy’s hometown there was a man who was called “Bone Collector”. This man like ...

  8. Java 银联支付官网demo测试及项目整合代码

    注:原文来源与 < Java 银联支付官网demo测试及项目整合代码  > 银联支付(网关支付B2C) 一.测试官网demo a)下载官网开发包,导入eclipse等待修改(下载的开发包没 ...

  9. Confluence 6 数据库整合的方法 1：基本流程

    步骤 1:对你的插件进行记录 对你近期在 Confluence 中安装和启用的插件进行记录,这你可以在后期对插件进行重新安装或者调整.针对你安装的插件,你需要记录下面的一些内容: 插件名称 版本号 启 ...

  10. Java的输入语句以及本周对于文件读写的研究

    日期:2018.9.20 博客期:010 星期四 ##:今天下午要考试 java(小考)!那么,我就应对相应的方法给出策略吧! 首先是 Java 里的输入语句,我一般是用Scanner类,用这个之前要 ...