Question

我有几个文件，我要从中提取次要文本（最多是一个单词），然后用另一个脚本对其进行样式化。

当前它们加载并显示应有的内容。但是，文本文件会随机更新，因此我希望重新加载它们，随后的脚本会再次应用于它们。我尝试了不同的setTimeout以及setInterval命令，但我认为问题是我的放置或使用情况。经过几个小时的研究，我敢肯定只是语法不合时宜。

此命令在本地运行，但通过执行脚本的程序进行拉动，就像远程执行一样。（无跨域问题）

这里是一个示例段，它提取文件并将随后的脚本读取显示的html加载到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););

任何方向都值得赞赏。我可以根据需要发布整个文件，但我认为有人会得到我正在做的事情，并且知道如何最好地指导我。

对于上下文，我使用一个脚本来接收文本，并使该文本看起来像一个LED，并像滚动条一样滚动。这被Twitch上的广播公司使用。

Answer 1

首先，我将从ledload()中抽出$window.ready()。这样，可以通过其名称进行引用。另外，我很确定您不需要$(...)函数的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秒的延迟，然后再重新进行。

如果您仍然希望ledload在$(window).ready()上运行，则也可以添加以下行：

$(window).ready(ledload);

P.S。我看不到.serialize()在做什么...应该传递给ledload()吗？

Answer 2

您处在正确的轨道上，但需要稍微移动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 ready函数仅接受一个参数，但是您将setTimeout作为第二个参数传递，因此被忽略了。

Answer 3

因此，回顾一下您在comment中提供的内容后，我找到了一种使之工作的方法。首先，是下面的html。这里是区别：

我创建了一个新元素<div class="led"></div>。我还将.crl css赋予了该元素，而使.crl具有display: none。这是因为.leddisplay函数采用该元素并将其替换为自己的HTML来呈现LED。因此，您需要将用于存储信息的div与用于呈现信息的div分开。（我建议仅使用JS变量来存储该信息，但我不打算重写您的代码，只是想使其正常工作。）
但是您如何将文本输入LED显示屏？使用.leddisplay，您可以输入所需的文本作为函数的第二个参数。您可以在postload()中看到我的操作方式。
要更新您的信息，您使用的是append()。这会添加到div中，但是您想对其进行更新，因此我将每个.append()替换为.text()来替换文本，而不是添加文本。

leddisplay

'destroy'

setTimeout()

HTML：

postload()

在插件内部，朝底部寻找<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>。我为其添加了2种方法：customMethods和getCurrentPosition，因此它应如下所示：

jquery.leddisplay.js，customMethods：

setCurrentPosition

进行这些更改后，它应该可以正常工作。

AJAX重载间隔（轮询）协助

3 个答案: