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 个方法:getCurrentPositionsetCurrentPosition,因此它应该如下所示:

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);
    }
}

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