Vue中消息横向滚动时setInterval清不掉的问题及解决方法


Posted in Javascript onAugust 23, 2019

最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快。这里记录一下来提醒自己。消息滚动的代码在最下面,方便下次使用。

问题背景: 最近在做一个需求,组件A获取消息采用的是轮询,组件A获取到新的消息后,将组件A中的消息传递给另外一个组件B,当组件B接收到消息时就让消息在页面上滚动播放。

实现思路: 这个项目应用的框架为VUE,当组件A获取到新的消息之后,就触发中央事件总线,在组件B中进行事件监听,将其添加进入一个数组,当判断定时器没有运动时,就触发滚动的函数。消息滚动的函数是从消息数组中提取出第一条,然后利用定时器进行消息滚动,当消息滚动到边缘时清除定时器。

问题:消息在滚动的过程中,该开始还能够按照给定的速度进行滚动,可是当时间变长后就会出现消息滚动的速度越来越快的问题。

原因:当出现这个问题时,我第一个念头就是setInterval没有被清掉,因为当定时器没有清掉之后又再次调用定时器就会导致多个定时器同时执行,比如第一次是一个计时器,再点一下是就是两个定时器,这时候每次就是+2,所以速度不断提升。我看了一下我设置的滚动函数,里面当消息滚动到边缘时,就清除这个定时器,所以在滚动函数中没有问题。我又看了下中央事件总线的事件监听器,发现问题在这里。因为我在判断一个定时器是否被销毁时,直接判断其类型是 数字 还是 null,由于当定时器开始运行时,每一次返回的都是一个ID(数字),而不是一开始的对象,导致当一条消息开始滚动时,又接收到一条新的消息,然后就使得两个定时器同时运行,从而出现这个问题。

解决方式:当消息滚动到盒子边缘销毁定时器时,将其赋值为null,然后修改中央事件的事件监听,将其判断没有定时器的条件修改为null,然后满足条件的调用消息滚动函数。

横向滚动的代码:

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #title {
        position: relative;
        width: 10%;
        margin: 30px auto;
        line-height: 30px;
        height: 30px;
        border: 1px solid red;
        overflow: hidden;
      }
      #content {
        position: absolute;
        left: 0;
        line-height: 30px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="title">
      <span id="content">123</span>
    </div>
    <script>
      var wrapEle = document.getElementById('title');
      let contentEle = document.getElementById('content');
      let arr = [
        {news: '这是一条新闻'}
      ];
      let timer = null;
      move(wrapEle, contentEle);
      function move(wrap, item) {
        clearInterval(timer);
        if (!arr.length) { return false;}
        item.innerHTML = arr[0].news;
        arr.splice( 0, 1 );
        let allWidth = getCurrentStyle(wrap, 'width');
        let itemWidth = getCurrentStyle(item, 'width');
        item.style.left = allWidth + 'px';
        let speed = 2;
        let time = 50;
        timer = setInterval( () => {
          let itemPlace = getCurrentStyle(item, 'left');
          if (itemPlace < -itemWidth) {
            clearInterval(timer);
          }
          item.style.left = itemPlace - speed + 'px';
        }, time)
      }
      function getCurrentStyle (ele, attr) {
        return window.getComputedStyle ? parseInt(window.getComputedStyle(ele, null)[attr]) : parseInt(ele.currentStyle[attr] );
      }
    </script>
  </body>
  </html>

总结

以上所述是小编给大家介绍的Vue中消息横向滚动时setInterval清不掉的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 #Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 #Javascript
VUE实现移动端列表筛选功能
Aug 23 #Javascript
简述ES6新增关键字let与var的区别
Aug 23 #Javascript
微信小程序后台持续定位功能使用详解
Aug 23 #Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 #Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
Python实现的ini文件操作类分享
2014/11/20 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python带参数打包exe及调用方式
2019/12/21 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
如何让python的运行速度得到提升
2020/07/08 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
学习决心书范文
2014/03/11 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
企业文化建设实施方案
2014/03/22 职场文书
就业意向书范文
2014/04/01 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
javascript函数式编程基础
2021/09/15 Javascript