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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python实现抢购IPhone手机
2018/02/07 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python实现超市商品销售管理系统
2019/10/25 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
2014年话务员工作总结
2014/11/19 职场文书
专职安全员岗位职责
2015/04/11 职场文书
2015年教研员工作总结
2015/05/26 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python