js轮询及踩过的坑

phpmatt 发布于2019-08-22 16:27 / 1060人阅读

摘要：背景下午四点，天气晴朗，阳光明媚，等着下班产品我希望页面上的这个数据实时变化开发，可以，用那个叫着的东西，再找一个封装好框架，如感觉自己好机智产品要开发好久开发嗯，三天，五天，还是产品我希望今天上线开发，，不能描述的语言，话说为什么不支持表

背景

下午四点，天气晴朗，阳光明媚，等着下班
产品：我希望页面上的这个数据实时变化
开发：···，可以，用那个叫着WebSocket的东西，再找一个封装好框架，如：mqtt（感觉自己好机智）
产品：要开发好久
开发：嗯，三天，五天，还是···
产品：我希望今天上线
开发：···，···，···（不能描述的语言，话说segmentfault为什么不支持表情）
开发：果断选择轮询

开发中




  轮询的坑

开发：今晚的月亮真圆啊，下班了···

第二天

产品：我希望这个实时加载，能随心所欲，我喊它加载就加载，喊它停就停
研发：(石化中···)

继续开发中




  轮询的坑

开发：（这么难得需求我都实现了，我是不是已经是专家了，我是不是应该升职加薪，接着赢娶白富美，走向人生巅峰，哈哈哈）
正沉醉于自己的成果中
产品：你的有bug
开发：（绝对不信中，肯定是你握鼠标的姿势不对，手感不好），怎么可能有bug，你是不是环境有问题，还在用ie6，多刷新几次
产品：···，你按钮多点几次，点快点，试试，数据会多次请求
开发：半信半疑的去尝试，还真是（好奇怪，检查了一圈没有发现任何问题）

分析过程

一进去页面执行start()，start是一个async函数,使得里面的异步也会像同步一样执行，函数的末尾timerId = setTimeout(start, 1000)，1000毫秒后再次执行start()，形成了一个轮询（这里的每一个请求之间的间隔肯定是大于1000+500的，至于为什么，可以去了解一下浏览器异步执行原理）

将setTimeout的id赋值给timerId，点击按钮后，清除当前定时器

看似没有任何问题，找不到问题的时候就只有一点点试错，最终发现去掉const { data } = await getData()之后，问题消失，请求的时间越长，出现的概率越高
画个图分析一下

先看一下js执行过程，按钮的click事件也相当于异步，然后我们再来文字分析一下，问题出现的原因

bug出现原因

假如没有const { data } = await getData()这步，点击的时候，click的回调函数能够执行，说明当前js肯定处于空闲状态（永远记住，js的单线程的），这时的setTimeout(start, 1000)一定处于异步状态(js一次只有执行一个任务)，

clearTimeout(timerId)可以很轻松的清除这次任务，不会让它进入js执行线程中执行

加上const { data } = await getData()之后，如果js现在处于setTimeout的回调函数已经执行并且等待await getData()中，js是空闲的，click可以执行，click清除了setTimeout的回调函数的执行（回调函数已经执行了），没有清除await getData()回调函数的执行，代码会继续执行console.log(data)；timerId = setTimeout(start, 1000)，从而不能停止循环，这就是bug产生的原因

bug产生的时机

这就是为什么，请求的时间越长，出现的概率越高

解决方案




  轮询的坑

专线服务混合云云服务器踩过的坑语言的坑爹设计阿里云服务器的坑轮询图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94375.html

js轮询及踩过的坑

摘要：背景下午四点，天气晴朗，阳光明媚，等着下班产品我希望页面上的这个数据实时变化开发，可以，用那个叫着的东西，再找一个封装好框架，如感觉自己好机智产品要开发好久开发嗯，三天，五天，还是产品我希望今天上线开发，，不能描述的语言，话说为什么不支持表背景下午四点，天气晴朗，阳光明媚，等着下班产品：我希望页面上的这个数据实时变化开发：···，可以，用那个叫着WebSocket的东西，再找一个封...

bang590 2019-08-02 10:14 评论0 收藏0
京JS会议分享

摘要：本次会议的大部分资料都可在以下地址下载在上分享了京的一些内容会议主要内容为前端的相关优化以及服务器端的相关技术分享。这是这次北京之行的意外收获，号称是下一代应用的开发框架，在会议中也有不少讲师提到这个框架，现场也有出售关于这个框架的书籍。本次会议的大部分资料都可在以下地址下载： http://vdisk.weibo.com/u/1744667943 sam_在blog上分享了京J...

CoderStudy 2019-08-19 14:22 评论0 收藏0
使用node子进程spawn,exec踩过的坑

摘要：最后发现使用子进程打开还真的就是使用到一定程度就挂掉。上面的简单流程就是启动一个子进程。逻辑就是，记录子进程的大小，一旦超过就掉子进程。我们在使用时，不知道设置，默认的是当我们子进程日志达到时，自动掉了。 showImg(https://segmentfault.com/img/bVrCnh); 如何在项目中实现热更新中提到的一个坑child_process的exec使用问题，下面文章...

cppprimer 2019-08-19 17:14 评论0 收藏0
那些年踩过的坑——node代理解决跨域的问题

摘要：在实际开发中，前后端分离的项目通常会需要同后台开发人员联调接口，不可避免的会碰到跨域的问题。在实际开发中，前后端分离的项目通常会需要同后台开发人员联调接口，不可避免的会碰到跨域的问题。虽说跨域问题最后基本都是后台同事解决的，但是有时候为了赶时间，没辙只有自己来，使用node代理解决跨域：协议域名端口号三个只要有一个不一样就是跨域，也就是不同域名之间的访问；通常解决跨域的...

worldligang 2019-08-23 14:43 评论0 收藏0