JS设计模式—节流模式的实际应用
防抖
首先我们先讲讲防抖，一个时间在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设计模式—节流模式的实际应用的更多相关文章
- js设计模式--迭代器模式
迭代器模式: 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示.js中我们经常会封装一个each函数用来实现迭代器. 理解的意思:提供一个方法,去把对象的每一项按 ...
- js设计模式--单体模式
GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自<松本行弘的程序世界>). ...
- 如何做JS 单体模式的设计---->>js设计模式<<-------单体模式
1. 单体模式是js中最基本 单最有用的模式之一,非常常用. 单体模式的基本结构如下: var Person = { name: 'lilu', age:', sayHi: function(){ a ...
- JS设计模式——工厂模式详解
它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器.取而代之,一个工厂能提供一个创建对象的公共接口,我们可以在其中指定我们希望被创建的工厂对象的类型. 简单工厂模式:使用一个类(通常 ...
- 浅谈js设计模式 — 命令模式
命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦 ...
- js设计模式-命令模式
命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高 ...
- js设计模式-组合模式
组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. ...
- js设计模式-桥接模式
桥接模式定义:桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化".这句话有三个关键词,也就是抽象化.实现化和 ...
- js设计模式-工厂模式（抽象工厂）
场景:定义一个抽象类 AbsProducer(生产商),该生产商有两个行为,一个生产,一个出售,其中生产方法为抽象方法,由具体的厂家(工厂)去实现,出售的产品均是电子产品(返回的对象为电子产品对象,即 ...
随机推荐
- CSP 201612-3 权限查询 【模拟+STL】
201612-3 试题名称: 权限查询 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 授权 (authorization) 是各类业务系统不可缺少的组成部分,系统用户通过授权 ...
- 经典的printk 写法
经典的printk 写法: printk("[lynn--%s@%d]: addr:0x%x \n",__func__,__LINE__,obj->client->a ...
- Linux 系统内核空间与用户空间通信的实现与分析
本文转载自:https://www.ibm.com/developerworks/cn/linux/l-netlink/index.html 多数的 Linux 内核态程序都需要和用户空间的进程交换数 ...
- [NOI2004]小H的小屋 贪心
神仙贪心,洛谷没有插图导致我题一开始都没看懂.容易发现,块越多越优秀,然后为了满足题意,所以假如不能整除,就分为两个部分(能整除就直接均分就行了).前一部分是n/m,后一部分是n/m+1.数量也是固定 ...
- 掌握面试主动权，从看懂这份Java技术手册开始
编者语:本文为纯干货,建议先转发.收藏再观看. 目录 jvm 一行代码是怎么运行的 jvm如何加载一个类 java对象的内存布局 反射的原理 动态代理 jvm的内存模型 jvm的垃圾回收 并发和锁 字 ...
- 【154】C#打包程序成安装包
参考0:用C#写完程序怎么用C#打包成安装程序setup自己做的图文说明示例 参考1:解决“默认公司名称” C#打包应用安装后,显示“默认公司名称”,想问问通过哪里可以修改??? 参考2:解决“添加卸 ...
- UVaLive 6834 Shopping (贪心)
题意:给定 n 个商店,然后有 m个限制,去 c 之前必须先去d,问你从0到n+1,最短路程是多少. 析:我们我们要到c,必须要先到d,那么举个例子,2 5, 3 7,如果我们先到5再到2,再到7再到 ...
- 如何在 ubuntu 12.04 上安装 skype（转载）
转自:http://blog.51osos.com/linux/how-to-install-skype-in-ubuntu-12-04/ 添加Canonical Partner Repository ...
- poj 3613 Cow Relays【矩阵快速幂+Floyd】
!:自环也算一条路径 矩阵快速幂,把矩阵乘法的部分替换成Floyd(只用一个点扩张),这样每"乘"一次,就是经过增加一条边的最短路,用矩阵快速幂优化,然后因为边数是100级别的,所 ...
- Cmake编译protobuf
编译指令,在powershell中执行 : .\protoc.exe .\ive.proto --cpp_out . .\protoc.exe .\ive.proto --csha ...