JavaScript闭包应用场合——控制前端接口轮训
很多人都知道JavaScript的闭包,也知道大致是一个什么意思,但是对于闭包的应用场合不是很清楚
最近在改造项目的过程之中修改前端接口轮训方式的时候用到了闭包驱动setTimeout来实现一个类似定时器的功能,可以开启定时器也可以关闭定时器
代码如下
// 创建异步轮训器(setTimeout实现),导出一个闭包对象,用于控制轮训
createLooper (func, time = 1000, params, callback = () => { }, err = () => { }) {
// 轮训时钟
let timer = -1;
// 轮训状态(开启,关闭)
let status = true;
// Promise化的setTimeout
function setTimeoutPromise (func, time, params) {
return new Promise((resolve, reject) => {
timer = setTimeout(async () => {
try {
let result = await func(params);
resolve(result);
}
catch (e) {
reject(e);
}
}, time);
});
}
// 导出的用于控制轮训的闭包对象
const closureObj = {
start () {
if (!status) {
asyncLoop();
status = true;
}
},
stop () {
if (status) {
clearTimeout(timer);
status = false;
}
},
};
// 首次访问,不在轮训体之内的
async function firstCall () {
try {
let result = await func(params);
callback(result, closureObj);
return true;
}
catch (e) {
clearTimeout(timer);
status = false;
console.error(e.message);
err(e, closureObj);
return false;
}
}
// 异步轮训循环
async function asyncLoop () {
let status = await firstCall();
if (status) {
while (true) {
try {
let result = await setTimeoutPromise(func, time, params);
callback(result, closureObj);
}
catch (e) {
clearTimeout(timer);
status = false;
console.error(e.message);
err(e, closureObj);
}
}
}
}
asyncLoop();
return closureObj;
},
这是一个函数,有五个参数
第一个参数为定时器要执行的函数
第二个参数为定时器的触发时间间隔
第三个参数为定时器执行参数的参数
第四个参数为获取执行函数返回值的回调
第五个参数为错误处理的回调
这个函数返回一个对象,这个对象内有两个方法都是闭包导出的方法
分别是start和stop,而这两个方法都访问了函数内部的status(轮训状态)变量以及timer(setTimeout返回的Id),所以可以控制定时器开启和关闭
正是因为闭包的能力所以我们可以调用这个函数返回的对象中的方法来控制函数内部的setTimeout的开启和关闭
这就是我在工作中遇到的闭包的一个小的应用场所
JavaScript闭包应用场合——控制前端接口轮训的更多相关文章
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
		闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ... 
- 我从来不理解JavaScript闭包,直到有人这样向我解释它...
		摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ... 
- 理解 JavaScript 闭包
		这是本系列的第 4 篇文章. 作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码: for (var i = 0; i < helpText.length; i++) { var ... 
- javascript闭包和作用域链
		最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ... 
- 最简明的JavaScript闭包解释
		最简明的JavaScript闭包解释 JavaScript是这几年最火的编程语言之一,从前端到服务器端,再到脚本,好像没有一个地方没有JavaScript的身影.这个世界上任何的一种事物的存在必然有其 ... 
- JavaScript闭包的一些理解
		原文:JavaScript闭包的一些理解 简单一点的说:闭包就是能够读取其他函数内部变量的函数.那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那 ... 
- 我从来不理解 JavaScript 闭包,直到有人这样向我解释它...
		正如标题所述,JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识. 最近看国外的一些文章,终于,有人用于一种 ... 
- javascript闭包—围观大神如何解释闭包
		闭包的概念已经出来很长时间了,网上资源一大把,本着拿来主意的方法来看看. 这一篇文章 学习Javascript闭包(Closure) 是大神阮一峰的博文,作者循序渐进,讲的很透彻.下面一一剖析. 1. ... 
- javascript闭包的使用--按钮切换
		闭包实现按钮状态切换 看下面的代码: var toggleBtn = document.getElementById('toggle'); var toggleFun = (function() { ... 
随机推荐
- Python 常用内置模块详解
			Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ... 
- 怎样通过id属性值获取元素节点
			方法1: 使用document.getElementById(); 方法2: 使用document.querySelector(); document.getElementById("app ... 
- 转载博客(Django2.0集成xadmin管理后台遇到的错误)
			转载博客地址:https://blog.csdn.net/yuezhuo_752/article/details/87916995 django默认是有一个admin的后台管理模块,但是丑,功能也不齐 ... 
- VBA学习资料分享-3
			VBA创建/发送OUTLOOK邮件时怎么加上默认签名呢?用过OUTLOOK写邮件的人都知道,如果你设置了默认签名,那么在创建空白邮件的时候就会自动加上你设置的签名.根据这一特性,我们可以在用VBA创建 ... 
- VisualVM的使用
			1.解压压缩包(如visualvm143.zip) 2.修改etc/visualvm.conf 中的visualvm_jdkhome配置 3.双击bin/visualvm.exe 4.安装插件,可能一 ... 
- 从零开始使用mocha测试
			mocha 需要在node环境下跑,请确保已经安装了node 1.新建一个文件夹 test 2.命令行切换到test目录下,执行命令:npm init ,出现选择按enter,一系列选择完成之 ... 
- Windows下解决系统端口被VM虚拟机占用问题
			一)问题背景 安装VM虚拟机后,经常会遇到启动其他程序时出现端口被占用的情况,其中以80端口被占用最为常见. 二)解决思路 解除或更改被占用端口号,但是更改端口号时,除非对系统的端口占用情况非常熟悉, ... 
- Mac下安装Redis及Redis Desktop Manager
			1.简介 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表 ... 
- Django restfulframework 开发相关知识 整理
			目录 目录 前言 前后端分离 实现前后端分离的方法 前后端分离带来的优点 RESTful十大规范 协议规范 域名规范 版本表示规范 url使用名词 http请求动词 过滤条件 状态码 错误信息 请求方 ... 
- pymysql_mysql密码重置方法,连接局域网数据库的解决办法
			https://blog.csdn.net/qq_37176126/article/details/72824106 pymysql模块的操作 https://blog.csdn.net/skh2 ... 
