很多人都知道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闭包应用场合——控制前端接口轮训的更多相关文章

  1. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  2. 我从来不理解JavaScript闭包,直到有人这样向我解释它...

    摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...

  3. 理解 JavaScript 闭包

    这是本系列的第 4 篇文章. 作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码: for (var i = 0; i < helpText.length; i++) { var ...

  4. javascript闭包和作用域链

    最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...

  5. 最简明的JavaScript闭包解释

    最简明的JavaScript闭包解释 JavaScript是这几年最火的编程语言之一,从前端到服务器端,再到脚本,好像没有一个地方没有JavaScript的身影.这个世界上任何的一种事物的存在必然有其 ...

  6. JavaScript闭包的一些理解

    原文:JavaScript闭包的一些理解 简单一点的说:闭包就是能够读取其他函数内部变量的函数.那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那 ...

  7. 我从来不理解 JavaScript 闭包,直到有人这样向我解释它...

    正如标题所述,JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识. 最近看国外的一些文章,终于,有人用于一种 ...

  8. javascript闭包—围观大神如何解释闭包

    闭包的概念已经出来很长时间了,网上资源一大把,本着拿来主意的方法来看看. 这一篇文章 学习Javascript闭包(Closure) 是大神阮一峰的博文,作者循序渐进,讲的很透彻.下面一一剖析. 1. ...

  9. javascript闭包的使用--按钮切换

    闭包实现按钮状态切换 看下面的代码: var toggleBtn = document.getElementById('toggle'); var toggleFun = (function() { ...

随机推荐

  1. xss level11

    Level11 (1) (2)毫无头绪,查看PHP源代码发现,是从头文件的referer获取的输入. (3)用Burp抓包,修改头文件如下: (4)再点击Proxy界面的forward,回到浏览器页面 ...

  2. selenium登录慕课网

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.s ...

  3. 13.lsof恢复删除的文件

    [root@temp ~]# lsof -p 5643COMMAND  PID   USER   FD   TYPE DEVICE  SIZE/OFF    NODE NAMEoracle  5643 ...

  4. 【数据结构】P1054 等价表达式

    [题目链接] https://www.luogu.org/problem/P1054 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数 ...

  5. Elastic Search快速上手(4):细节补充

    模糊搜索 可以进行模糊搜索: GET job/type1/_search { "query":{ "fuzzy":{ "title":{ & ...

  6. 11-MySQL DBA笔记-MySQL的监控

    第11章 MySQL的监控 为什么我们需要监控呢?因为如果没有了监控,那么我们的服务可用性就无从度量,我们也无法及时地发现问题和处理问题.一个完善的监控体系,不仅需要进行实时的监控,也需要分析历史的监 ...

  7. javaIO——PipedReader & PipedWriter

    1. 概述: PipedReader 和 PipedWriter,意为管道读写流.所谓管道,那就是有进有出,所以这也是它们跟其它流对象最显著的区别:PipedReader和PipedWriter必须成 ...

  8. [转载]linux的top命令中cpu信息的含义

    https://www.cnblogs.com/wjoyxt/p/4918742.html 原文很好,我就不摘录了.

  9. 关于微信小程序返回页面时刷新页面的实现

    在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...

  10. 一 ArrayList 及其源码解析

    1.数组介绍 因为数组在存储数据时是按顺序存储的,存储的内存也是连续的,所以其特点是读取数据比较容易,插入删除比较困难 2.arraylist源码分析 1)构造方法(默认容量为10) 2)插入数据 扩 ...