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 select多选框的左右移动 具体实现代码
Jul 03 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
js实现简单图片拖拽效果
Feb 22 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 表单提交给自己
2008/07/24 PHP
PHP print类函数使用总结
2010/06/25 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
图片之间的切换
2006/06/26 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
React实现全选功能
2020/08/25 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python生成excel的实例代码
2017/11/08 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
中科方德软件测试面试题
2016/04/21 面试题
党员教师批评与自我批评发言稿
2014/10/15 职场文书
廉政承诺书
2015/01/19 职场文书
离职感谢信
2015/01/21 职场文书
医生个人年度总结
2015/02/28 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
2019 入党申请书范文
2019/07/10 职场文书