防抖

首先我们先讲讲防抖，一个时间在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. mongodb由于目标计算机积极拒绝无法连接失败

    这不是mongodb无法启动,是你还没有启动mongodb就来连接使用它了,肯定是不成功的.安装完mongodb后先将bin目录在环境变量下写入path然后在bin同级目录下创建一个db文件夹接着运行 ...

  2. codeforces 552 C Vanya and Scales

    这个题的意思就是给出一个数m.以及一个以1为首元素.w为比例常数的等比数列,数列长度为101,数列中每一个数字最多仅仅能用一次.问是否存在xa+wb+--=wc+wd+--+we+m. 非常显然,换句 ...

  3. 满足qps 同时兼顾 数据生产速率

    满足qps 同时兼顾  数据生产速率

  4. 红米note怎么打开USB调试模式

    红米note到货后,打开USB调试模式是一些新手很棘手的问题,所以要手机助手成功识别红米note,你必须打开红米note的USB调试模式.在安卓4.2版本中,系统的USB调试模式不是非常简单地被打开的 ...

  5. BZOJ_1692_[Usaco2007 Dec]队列变换_后缀数组

    BZOJ_1692_[Usaco2007 Dec]队列变换_后缀数组 Description FJ打算带他的N(1 <= N <= 30,000)头奶牛去参加一年一度的“全美农场主大奖赛” ...

  6. easyui图标对照

    转自:https://blog.csdn.net/qq_34545192/article/details/78250816 原作者文章地址: http://www.cnblogs.com/timeme ...

  7. E20170611-hm

    ascending   adj. 上升的,向上的; ascend   vt. 攀登; 继承; 占领;   vi. 上升; 爬坡; 追溯; descending  n. 递减;  descend   v ...

  8. activiti遇到的问题

    1.act_hi_detail表里面没有数据 原因是没有加历史变量的判断 2.流程图添加网关,写流转表达式 比如请假流程   大于3天小于5天的条件:${请假实体类.属性名称}

  9. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  10. spring cloud config搭建说明例子（一）-简单示例

    服务端 ConfigServer pom.xml添加config jar <dependency> <groupId>org.springframework.cloud< ...