跑马灯使用setInterval函数,滚动越来越快

刚开始滚动速度是可以的,然后越来越快,看不清的快;

因为页面中有参数选择,用setTimeout函数选择参数后更新报表块数据会出现滚动条,所以用的setInterval函数,没有用setTimeout函数,

报表块数据滚动:

setInterval(function() {

var $report = $("div[widgetname=REPORT0]");

//获取对应report的div元素

var $scroll = $report.find("#frozen-center");

//获取对应report的div元素的滚动块元素,冻结为#frozen-center,未冻结且未安装自定义滚动条插件为.reportContent,未冻结且安装了自定义滚动条插件为.scrollDiv

var flag = window.flag0;

//设置全局变量flag,每个报表块需保证各不相同

$report.find("#frozen-center").css('overflow-x', 'hidden');

$report.find("#frozen-center").css('overflow-y', 'hidden');

$report.find("#frozen-north").css('overflow-x', 'hidden');

$report.find("#frozen-north").css('overflow-y', 'hidden');

//冻结情况下隐藏滚动条

$report.find(".reportContent").css('overflow-y', 'hidden');

$report.find(".reportContent").css('overflow-x', 'hidden');

//非冻结情况下隐藏滚动条

flag = true;

//定义全局参数flag,用来控制滚动的暂停和继续

$scroll.mouseover(function() {

flag = false;

})

//鼠标悬浮,滚动停止

$scroll.mouseleave(function() {

flag = true;

})

//鼠标离开,继续滚动

var old = -1;

setInterval(function() {

if (flag) {

currentpos = $scroll[0].scrollTop;

//获取距顶部距离

if (currentpos == old) {

$scroll[0].scrollTop = 0;

//若已到达底部,则重置

} else {

old = currentpos;

$scroll[0].scrollTop = currentpos + 1.5;

//若未到达底部,则向下移动1.5像素

}

}

}, 50);

//以25ms的频率执行

}, 1000);

image.pngimage.png

wangqiaofeng 发布于 2021-5-30 19:31 (编辑于 2021-5-31 10:36)
1min目标场景问卷 立即参与
回答问题
悬赏:4 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
0
jongwangLv6中级互助
发布于2021-5-31 14:29(编辑于 2021-5-31 14:38)

简单点的话,就分开来写试下:

// body初始化1  及   日期控件编辑后  的js

setInterval(function() {

var $report = $("div[widgetname=REPORT0]");

//获取对应report的div元素

$report.find("#frozen-center").css('overflow-x', 'hidden');

$report.find("#frozen-center").css('overflow-y', 'hidden');

$report.find("#frozen-north").css('overflow-x', 'hidden');

$report.find("#frozen-north").css('overflow-y', 'hidden');

//冻结情况下隐藏滚动条

$report.find(".reportContent").css('overflow-y', 'hidden');

$report.find(".reportContent").css('overflow-x', 'hidden');

}, 1000);

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// body初始化2  

setTimeout(function() {

var $report = $("div[widgetname=REPORT0]");

//获取对应report的div元素

var $scroll = $report.find("#frozen-center");

//获取对应report的div元素的滚动块元素,冻结为#frozen-center,未冻结且未安装自定义滚动条插件为.reportContent,未冻结且安装了自定义滚动条插件为.scrollDiv

var flag = window.flag0;

//设置全局变量flag,每个报表块需保证各不相同

//非冻结情况下隐藏滚动条

flag = true;

//定义全局参数flag,用来控制滚动的暂停和继续

$scroll.mouseover(function() {

flag = false;

})

//鼠标悬浮,滚动停止

$scroll.mouseleave(function() {

flag = true;

})

//鼠标离开,继续滚动

var old = -1;

setInterval(function() {

if (flag) {

currentpos = $scroll[0].scrollTop;

//获取距顶部距离

if (currentpos == old) {

$scroll[0].scrollTop = 0;

//若已到达底部,则重置

} else {

old = currentpos;

$scroll[0].scrollTop = currentpos + 1.5;

//若未到达底部,则向下移动1.5像素

}

}

}, 50);

//以25ms的频率执行

}, 1000);

如下图,body中写两个:一个是setInterval  来隐藏滚动条,一个是setTimeout的滚动js

image.png

日期控件中也加一段编辑后让页面滚动的js

image.png

报表本身加载需要点时间,且用setTimeout里面的方法来实现隐藏滚动条时,往往会因为设置延迟时间没有够长,导致没有隐藏掉滚动条。

最佳回答
0
snrtuemcLv8专家互助
发布于2021-5-30 19:54(编辑于 2021-5-31 08:14)

跑马灯定时刷新.frm

在下面语句中加一句

if (currentpos == old) {

$scroll[0].scrollTop = 0;

clearInterval(interval); 

  • wangqiaofeng wangqiaofeng(提问者) 没用呢,还是越跑越快
    2021-05-30 22:26 
  • snrtuemc snrtuemc 回复 wangqiaofeng(提问者) 那我给你个模板,可以定时刷新取数据,不加快速度,你参考下,看修改答案
    2021-05-31 08:14 
  • wangqiaofeng wangqiaofeng(提问者) 回复 snrtuemc 还是有滚动条呢,我页面有个日期控件
    2021-05-31 10:21 
最佳回答
0
shirokoLv6资深互助
发布于2021-5-31 08:16

分两个初始化事件,一个是用setinterval的去滚动条,

一个是用settimeout的跑马灯

  • 祈L 祈L 你说反了吧
    2021-05-31 09:26 
  • shiroko shiroko 回复 祈L 没反吧。。如果你理解了,试试就行
    2021-05-31 09:34 
  • 祈L 祈L 回复 shiroko 这两个函数在这两个场景都可以用,看理解吧
    2021-05-31 09:58 
  • wangqiaofeng wangqiaofeng(提问者) 然后我选择日期之后,报表刷新了一下,滚动条就不滚动了
    2021-05-31 10:36 
  • shiroko shiroko 回复 wangqiaofeng(提问者) O,你控件没放在参数栏。。会自动联动刷新,联动不触发初始化
    2021-05-31 10:38 
  • 4关注人数
  • 1455浏览人数
  • 最后回答于:2021-5-31 14:38
    请选择关闭问题的原因
    确定 取消
    返回顶部