防抖

首先我们先讲讲防抖，一个时间在n秒内触发了很多次，我们只执行一次，总之就是等事件触发完n秒不再触发，才执行

/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
*/

function debounce(func, wait) {

　　let timeout;

　　return function() {

　　　　let context = this;  // this指向

　　　　let args = arguments;

　　　　if(timeout)  clearTimeout(timeout);

　　　　timeout = setTimeout(() => {

　　　　　　func.apply(context);

　　　　}, wait);

　　}

}

　　下面让我们开尝试调用一下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<input type="text" id="inputDom"/>

	</body>

</html>

<script type="text/javascript">

	var content = document.getElementById('inputDom');

	function press() {

		console.log("开始输入了");

	}

	content.debounce= function (){

		throttle(press, 500);

	}

</script>

　　可以看到，当连续输入内容，在500毫秒内只发一次，这就达到了防抖的效果了。

节流

持续触发某一事件，每隔n秒执行一次。关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

使用定时器

/**

* @desc 函数节流

* @param func 函数

* @param wait 延迟执行的毫秒数

*/

function throttle(func, wait) {

    let timeout;

    return function() {

        let context = this;
　　　　 let args = argumetns;　
　　　　 if(!timeout) {
　　　　　　　timeout = setTimeout(() => {
　　　　　　　　timeout = null;
　　　　　　　　func.apply(context, args)
　　　　　　　}, wait)　　　　　

        }

    }

}

使用时间戳　　

/**

* @desc 函数节流

* @param func 函数

* @param wait 延迟执行的毫秒数

*/

function throttle(func, wait) {

    let previous = 0;

    return function() {

        let now = Date.now();

        let context = this;

	let args = arguments;

        if(now - previous >wait) {

            func.apply(context, args);

	    previous = now

        }

    }

}	        　　

JS设计模式—节流模式的实际应用的更多相关文章

  1. js设计模式--迭代器模式

    迭代器模式: 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示.js中我们经常会封装一个each函数用来实现迭代器. 理解的意思:提供一个方法,去把对象的每一项按 ...

  2. js设计模式--单体模式

    GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自<松本行弘的程序世界>). ...

  3. 如何做JS 单体模式的设计---->>js设计模式<<-------单体模式

    1. 单体模式是js中最基本 单最有用的模式之一,非常常用. 单体模式的基本结构如下: var Person = { name: 'lilu', age:', sayHi: function(){ a ...

  4. JS设计模式——工厂模式详解

    它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器.取而代之,一个工厂能提供一个创建对象的公共接口,我们可以在其中指定我们希望被创建的工厂对象的类型. 简单工厂模式:使用一个类(通常 ...

  5. 浅谈js设计模式 — 命令模式

    命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦 ...

  6. js设计模式-命令模式

    命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高 ...

  7. js设计模式-组合模式

    组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. ...

  8. js设计模式-桥接模式

    桥接模式定义:桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化".这句话有三个关键词,也就是抽象化.实现化和 ...

  9. js设计模式-工厂模式（抽象工厂）

    场景:定义一个抽象类 AbsProducer(生产商),该生产商有两个行为,一个生产,一个出售,其中生产方法为抽象方法,由具体的厂家(工厂)去实现,出售的产品均是电子产品(返回的对象为电子产品对象,即 ...

随机推荐

  1. Python爬虫开发【第1篇】【正则表达式】

    非结构化数据:HTML(正则表达式.XPath.CSS选择器) 结构化数据:JSON文件(JSON Path.转化为Python类型进行操作) XML文件(转化成Python类型.XPath.CSS选 ...

  2. 函数计算 触发式计算 日志 MP3 图片 合成视频

    函数计算 触发式计算   日志  MP3 图片 合成视频 [start_time]:20120511 06:59:11 [20120511 06:59:11_0.4950568322522534]: ...

  3. go2基本类型

    /* Go基本类型 布尔型:bool - 长度:1字节 - 取值范围:true, false - 注意事项:不可以用数字代表true或false 整型:int/uint - 根据运行平台可能为32或6 ...

  4. 怎么查询数据库中第30到40条记录呢？ 通过ID，查询当前第30-40条记录 注意，ID不是顺序的

    http://blog.csdn.net/lee576/article/details/5812347 http://bbs.csdn.net/topics/190070614 http://www. ...

  5. YTU 2541: 汽水瓶

    2541: 汽水瓶 时间限制: 1 Sec  内存限制: 128 MB 提交: 40  解决: 27 题目描述 有这样一道智力题:"某商店规定:三个空汽水瓶可以换一瓶汽水.小张手上有十个空汽 ...

  6. mybatis多表关联配置

    首先需要的jar包 mybatis-3.4.1 配置文件(mybatis.cfg.xml) <?xml version="1.0" encoding="UTF-8& ...

  7. android.content.ReceiverCallNotAllowedException: 解决方法

    一. android.content.ReceiverCallNotAllowedException: IntentReceiver components are not allowed to reg ...

  8. luogu 2627 修建草坪

    题目大意: 一个数列,取出一些数使得它们的总和最大且没有k个连续 思路: 首先我们可以找到一个nk的dp dp方程:dp[i]=dp[i-1]+sum[i]-sum[j] (sum[j]尽量小) 然后 ...

  9. Code First: 五大映射模式

    映射一 Mapping the Table-Per-Hierarchy (TPH) Inheritance 模型文件 using System.Data.Entity; using System.Da ...

  10. SVN工具使用技巧

    SVN打tag SVN打tag是一个很常用的功能,要谈打tag,还得从SVN官方推荐的目录结构说起.SVN官方推荐在一个版本库的根目录下先建立trunk.branches.tags这三个文件夹,其中t ...