AJAX 重新加载间隔（轮询）协助

Question

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

目前它们正在按应有的方式加载和显示。但是，文本文件会随机更新，所以我希望重新加载它们，然后再次对它们应用后续脚本。我尝试了不同的 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 上的广播公司。

Answer 1

首先我会从 $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()？

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 就绪函数只接受一个参数，但您将 setTimeout 作为第二个参数传递，因此它被忽略了。

Answer 3

因此，在查看您在中提供的内容后，我找到了使其正常工作的方法。首先，是下面的 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);
    }
}

进行这些更改后，它应该会按预期工作。

AJAX 重新加载间隔（轮询）协助

AJAX Reload Interval (Polling) Assistance

javascript

jquery

ajax

polling

ajax-polling