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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
JavaScript实现alert弹框效果
Nov 19 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数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
PHP中文编码小技巧
2014/12/25 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
微信小程序如何获取用户信息
2018/01/26 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
解析Python编程中的包结构
2015/10/25 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
《在大海中永生》教学反思
2014/02/24 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
餐馆开业致辞
2015/08/01 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
如何利用React实现图片识别App
2022/02/18 Javascript
带你了解Java中的ForkJoin
2022/04/28 Java/Android