AJAX 重新加载间隔(轮询)协助
AJAX Reload Interval (Polling) Assistance
我从几个文件中提取次要文本(最多一个词),然后使用另一个脚本对其进行样式化。
目前它们正在按应有的方式加载和显示。但是,文本文件会随机更新,所以我希望重新加载它们,然后再次对它们应用后续脚本。
我尝试了不同的 setTimeout 和 setInterval 命令,但我认为问题出在我的放置或使用上。经过几个小时的研究,我确定这只是语法不合适。
这在本地运行,但通过一个程序拉取,该程序像远程一样执行脚本。 (没有跨域问题)
这是一个示例片段,它提取文件并加载到 html 后续脚本读取以显示:
$(function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
$("#follow").append(data).serialize();
},
setTimeout(fuction(){
follow_pull()
}, 10000);
});
});
这是将这些文件加载到脚本中以显示的片段:
$(window).ready(function ledload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount:650,
verticalPixelsCount:5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor : '#020202',
enabledPixelColor: '#ff522b'
};
$('.canvasld, .crl').leddisplay($.extend(options, {pixelSize: 3}));
},
setTimeout(fuction(){
ledload()
}, 10000););
任何方向表示赞赏。如果需要,我可以 post 整个文件,但我想有人会明白我在做什么,并且知道如何最好地指导我。
对于上下文,我正在使用一个脚本来获取文本,并使它看起来像一个 LED 并像一个自动收报机一样滚动。这被用于 Twitch 上的广播公司。
首先我会从 $window.ready()
中拉出 ledload()
。这样,它就可以通过它的名称来引用。另外,我很确定您不需要 follow_pull()
函数的 $(...)
包装器...
function ledload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount:650,
verticalPixelsCount:5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor : '#020202',
enabledPixelColor: '#ff522b'
};
$('.canvasld, .crl').leddisplay($.extend(options, {pixelSize: 3}));
}
function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
$("#follow").append(data).serialize();
ledload();
setTimeout(function(){
follow_pull();
}, 10000);
}
});
};
follow_pull()
在成功获取数据后调用ledload()
。然后它会设置 10 秒的延迟,然后再重新开始。
如果您仍然希望在 $(window).ready()
上 ledload
到 运行,您也可以添加此行:
$(window).ready(ledload);
P.S。我不明白 .serialize()
在做什么...是否应该传递给 ledload()
?
你走在正确的轨道上,但你需要稍微移动 setTimeouts
,如下所示:
$(function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
$("#follow").append(data).serialize();
setTimeout(fuction(){
follow_pull()
}, 10000);
},
});
});
这样,一旦数据加载成功,它会在 10 秒后再次调用 follow_pull
。
另外一点,你需要这样移动它:
$(window).ready(function ledload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount: 650,
verticalPixelsCount: 5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor: '#020202',
enabledPixelColor: '#ff522b'
};
$('.canvasld, .crl').leddisplay($.extend(options, {
pixelSize: 3
}));
setTimeout(fuction() {
ledload()
}, 10000);
});
AJAX 就绪函数只接受一个参数,但您将 setTimeout 作为第二个参数传递,因此它被忽略了。
因此,在查看您在 中提供的内容后,我找到了使其正常工作的方法。
首先,是下面的 html。以下是不同之处:
- 我创建了一个新元素
<div class="led"></div>
。我还为该元素提供了 .crl
css,而不是让 .crl
具有 display: none
。这是因为 .leddisplay
函数获取元素并将其替换为它自己的 HTML 以呈现 LED。因此,您需要将用于存储信息的 div
与用于呈现信息的 div
分开。 (我建议只使用 JS 变量来存储该信息,但我并不是要重写您的代码,只是想让它正常工作。)
- 那么如何将文字输入到LED显示屏中呢?使用
.leddisplay
你可以输入你想要的文本作为函数的第二个参数。你可以在 postload()
. 中看到我是如何做到的
- 要更新您的信息,您使用的是
append()
。这会添加到 div,但您想更新它们,所以我将每个 .append()
替换为 .text()
来替换文本而不是添加文本。
- 终于解决了核心问题。
leddisplay
插件无法更新 LED。所以你必须 'destroy'
它,然后重新运行它,就像我在 postload()
的 setTimeout()
中所做的那样。但就其本身而言,每 10 秒重新开始滚动一次。所以我所做的是跟踪当前位置,然后在重新运行它之后,我从那里恢复滚动。然而,为了让它工作,我需要更新插件代码。 HTML 下方是对此的解释。
HTML:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.led {
padding-top: 2px;
padding-bottom: 2px;
background-color: #444;
}
.crl {
display: none;
}
</style>
<div class="top-bar"></div>
<div class="crl">Newest Subscriber - <span id="sub"></span>
LAST DONATION - <span id="donation"></span>
LATEST BITS - <span id="bits"></span>
rECENT FOLLOWEr - <span id="follow"></span>
Sub Goal - <span id="subgoal"></span> / 80</div>
<div class="led"></div>
<div class="bottom-bar"></div>
<script type="text/javascript">
$.ajaxSetup({
async: false,
cache: false
});
$(function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#follow").text(data);
setTimeout(function(){
follow_pull()
}, 10000);
},
});
});
$(function donator_pull() {
$.ajax({
url : "most_recent_donator.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#donation").text(data);
setTimeout(function(){
donator_pull()
}, 10000);
},
});
});
$(function cheerer_pull() {
$.ajax({
url : "most_recent_cheerer.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#bits").text(data);
setTimeout(function(){
cheerer_pull()
}, 10000);
},
});
});
$(function subscriber_pull() {
$.ajax({
url : "most_recent_subscriber.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#sub").text(data);
setTimeout(function(){
subscriber_pull()
}, 10000);
},
});
});
$(function count_pull() {
$.ajax({
url : "total_subscriber_count.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#subgoal").text(data);
setTimeout(function(){
count_pull()
}, 10000);
},
});
});
$(function ledload() {
$.getScript( "ticker/jquery.leddisplay.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});
});
$(function postload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount:650,
verticalPixelsCount:5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor : '#020202',
enabledPixelColor: '#ff522b'
};
$(".led").leddisplay($.extend(options, {
pixelSize: 3
}), $('.crl').text());
setTimeout(function () {
//get the current position
var x = $(".led").leddisplay('getCurrentPosition')
//destroy the led setup
$('.led').leddisplay('destroy');
//create it again
postload();
//set the position to where it left off at
$(".led").leddisplay('setCurrentPosition', x)
}, 10000);
});
</script>
在插件内部,在底部寻找 customMethods
。我向它添加了 2 个方法:getCurrentPosition
和 setCurrentPosition
,因此它应该如下所示:
jquery.leddisplay.js,自定义方法:
var customMethods = {
init: function(){
var _arg = arguments;
return this.each(function() {
var $this = $(this);
if ($this.data('leddisplay'))
return;
$this.data('leddisplay', true);
var methods = resolveMethods(this);
methods.init.apply($this, _arg);
});
},
destroy: function(){
var _arg = arguments;
return this.each(function() {
var $this = $(this);
if (!$this.data('leddisplay'))
return;
$this.data('leddisplay', null);
var methods = resolveMethods(this);
methods.destroy.apply($this, _arg);
});
},
start: function(){
},
stop: function(){
},
getCurrentPosition: function(){
return $(this).data('currentPosition');
},
setCurrentPosition: function(x){
$(this).data('currentPosition', x);
}
}
进行这些更改后,它应该会按预期工作。
我从几个文件中提取次要文本(最多一个词),然后使用另一个脚本对其进行样式化。
目前它们正在按应有的方式加载和显示。但是,文本文件会随机更新,所以我希望重新加载它们,然后再次对它们应用后续脚本。 我尝试了不同的 setTimeout 和 setInterval 命令,但我认为问题出在我的放置或使用上。经过几个小时的研究,我确定这只是语法不合适。
这在本地运行,但通过一个程序拉取,该程序像远程一样执行脚本。 (没有跨域问题)
这是一个示例片段,它提取文件并加载到 html 后续脚本读取以显示:
$(function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
$("#follow").append(data).serialize();
},
setTimeout(fuction(){
follow_pull()
}, 10000);
});
});
这是将这些文件加载到脚本中以显示的片段:
$(window).ready(function ledload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount:650,
verticalPixelsCount:5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor : '#020202',
enabledPixelColor: '#ff522b'
};
$('.canvasld, .crl').leddisplay($.extend(options, {pixelSize: 3}));
},
setTimeout(fuction(){
ledload()
}, 10000););
任何方向表示赞赏。如果需要,我可以 post 整个文件,但我想有人会明白我在做什么,并且知道如何最好地指导我。
对于上下文,我正在使用一个脚本来获取文本,并使它看起来像一个 LED 并像一个自动收报机一样滚动。这被用于 Twitch 上的广播公司。
首先我会从 $window.ready()
中拉出 ledload()
。这样,它就可以通过它的名称来引用。另外,我很确定您不需要 follow_pull()
函数的 $(...)
包装器...
function ledload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount:650,
verticalPixelsCount:5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor : '#020202',
enabledPixelColor: '#ff522b'
};
$('.canvasld, .crl').leddisplay($.extend(options, {pixelSize: 3}));
}
function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
$("#follow").append(data).serialize();
ledload();
setTimeout(function(){
follow_pull();
}, 10000);
}
});
};
follow_pull()
在成功获取数据后调用ledload()
。然后它会设置 10 秒的延迟,然后再重新开始。
如果您仍然希望在 $(window).ready()
上 ledload
到 运行,您也可以添加此行:
$(window).ready(ledload);
P.S。我不明白 .serialize()
在做什么...是否应该传递给 ledload()
?
你走在正确的轨道上,但你需要稍微移动 setTimeouts
,如下所示:
$(function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
$("#follow").append(data).serialize();
setTimeout(fuction(){
follow_pull()
}, 10000);
},
});
});
这样,一旦数据加载成功,它会在 10 秒后再次调用 follow_pull
。
另外一点,你需要这样移动它:
$(window).ready(function ledload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount: 650,
verticalPixelsCount: 5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor: '#020202',
enabledPixelColor: '#ff522b'
};
$('.canvasld, .crl').leddisplay($.extend(options, {
pixelSize: 3
}));
setTimeout(fuction() {
ledload()
}, 10000);
});
AJAX 就绪函数只接受一个参数,但您将 setTimeout 作为第二个参数传递,因此它被忽略了。
因此,在查看您在
- 我创建了一个新元素
<div class="led"></div>
。我还为该元素提供了.crl
css,而不是让.crl
具有display: none
。这是因为.leddisplay
函数获取元素并将其替换为它自己的 HTML 以呈现 LED。因此,您需要将用于存储信息的div
与用于呈现信息的div
分开。 (我建议只使用 JS 变量来存储该信息,但我并不是要重写您的代码,只是想让它正常工作。) - 那么如何将文字输入到LED显示屏中呢?使用
.leddisplay
你可以输入你想要的文本作为函数的第二个参数。你可以在postload()
. 中看到我是如何做到的
- 要更新您的信息,您使用的是
append()
。这会添加到 div,但您想更新它们,所以我将每个.append()
替换为.text()
来替换文本而不是添加文本。 - 终于解决了核心问题。
leddisplay
插件无法更新 LED。所以你必须'destroy'
它,然后重新运行它,就像我在postload()
的setTimeout()
中所做的那样。但就其本身而言,每 10 秒重新开始滚动一次。所以我所做的是跟踪当前位置,然后在重新运行它之后,我从那里恢复滚动。然而,为了让它工作,我需要更新插件代码。 HTML 下方是对此的解释。
HTML:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.led {
padding-top: 2px;
padding-bottom: 2px;
background-color: #444;
}
.crl {
display: none;
}
</style>
<div class="top-bar"></div>
<div class="crl">Newest Subscriber - <span id="sub"></span>
LAST DONATION - <span id="donation"></span>
LATEST BITS - <span id="bits"></span>
rECENT FOLLOWEr - <span id="follow"></span>
Sub Goal - <span id="subgoal"></span> / 80</div>
<div class="led"></div>
<div class="bottom-bar"></div>
<script type="text/javascript">
$.ajaxSetup({
async: false,
cache: false
});
$(function follow_pull() {
$.ajax({
url : "most_recent_follower.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#follow").text(data);
setTimeout(function(){
follow_pull()
}, 10000);
},
});
});
$(function donator_pull() {
$.ajax({
url : "most_recent_donator.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#donation").text(data);
setTimeout(function(){
donator_pull()
}, 10000);
},
});
});
$(function cheerer_pull() {
$.ajax({
url : "most_recent_cheerer.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#bits").text(data);
setTimeout(function(){
cheerer_pull()
}, 10000);
},
});
});
$(function subscriber_pull() {
$.ajax({
url : "most_recent_subscriber.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#sub").text(data);
setTimeout(function(){
subscriber_pull()
}, 10000);
},
});
});
$(function count_pull() {
$.ajax({
url : "total_subscriber_count.txt",
dataType: "text",
success : function (data) {
console.log(data);
$("#subgoal").text(data);
setTimeout(function(){
count_pull()
}, 10000);
},
});
});
$(function ledload() {
$.getScript( "ticker/jquery.leddisplay.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});
});
$(function postload() {
var options = {
pixelSize: 5,
stepDelay: 62,
horizontalPixelsCount:650,
verticalPixelsCount:5,
pixelRatio: 0.8,
pathToPixelImage: 'ticker/pixel.png',
backgroundColor: '#000',
disabledPixelColor : '#020202',
enabledPixelColor: '#ff522b'
};
$(".led").leddisplay($.extend(options, {
pixelSize: 3
}), $('.crl').text());
setTimeout(function () {
//get the current position
var x = $(".led").leddisplay('getCurrentPosition')
//destroy the led setup
$('.led').leddisplay('destroy');
//create it again
postload();
//set the position to where it left off at
$(".led").leddisplay('setCurrentPosition', x)
}, 10000);
});
</script>
在插件内部,在底部寻找 customMethods
。我向它添加了 2 个方法:getCurrentPosition
和 setCurrentPosition
,因此它应该如下所示:
jquery.leddisplay.js,自定义方法:
var customMethods = {
init: function(){
var _arg = arguments;
return this.each(function() {
var $this = $(this);
if ($this.data('leddisplay'))
return;
$this.data('leddisplay', true);
var methods = resolveMethods(this);
methods.init.apply($this, _arg);
});
},
destroy: function(){
var _arg = arguments;
return this.each(function() {
var $this = $(this);
if (!$this.data('leddisplay'))
return;
$this.data('leddisplay', null);
var methods = resolveMethods(this);
methods.destroy.apply($this, _arg);
});
},
start: function(){
},
stop: function(){
},
getCurrentPosition: function(){
return $(this).data('currentPosition');
},
setCurrentPosition: function(x){
$(this).data('currentPosition', x);
}
}
进行这些更改后,它应该会按预期工作。