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 相关文章推荐
用于table内容排序
Jul 21 Javascript
犀利的js 函数集合
Jun 11 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 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将会员数据导入到ucenter的代码
2010/07/18 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
企业演讲稿范文
2013/12/28 职场文书
小学校园活动策划
2014/01/30 职场文书
信息工作经验交流材料
2014/05/28 职场文书
法人委托书
2014/07/31 职场文书
小学教师工作总结2015
2015/04/07 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
法律讲堂观后感
2015/06/11 职场文书