Question

我无法弄清楚该怎么做。

我有两个单独的脚本。第一个生成间隔（或超时）以每x秒运行一个指定的函数，即重新加载页面。

另一个脚本包含用于控制（暂停/播放）此间隔的按钮的操作。

这里的缺陷是双方必须异步（两者都在加载文档时运行）。

如何在第二个脚本中正确使用间隔？

这里是jsFiddle：http://jsfiddle.net/hm2d6d6L/4/

以下是快速浏览的代码：

var interval;
// main script
(function($){
    $(function(){
        var reload = function() {
            console.log('reloading...');
        };
        // Create interval here to run reload() every time
    });
})(jQuery);

// Another script, available for specific users
(function($){
    $(function(){
        var $playerButton = $('body').find('button.player'),
            $icon         = $playerButton.children('i');
            buttonAction = function(e){
                e.preventDefault();
                if ($(this).hasClass('playing')) {
                    // Pause/clear interval here
                    $(this).removeClass('playing').addClass('paused');
                    $icon.removeClass('glyphicon-pause').addClass('glyphicon-play');
                }
                else {
                    // Play/recreate interval here
                    $(this).removeClass('paused').addClass('playing');
                    $icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
                }
            },
            buttonInit = function() {
                $playerButton.on('click', buttonAction);
            };
        buttonInit();
    });
})(jQuery);

Answer 1

您可以创建一个简单的事件总线。这很容易用jQuery创建，因为你已经有了它：

// somewhere globally accessible (script 1 works fine)
var bus = $({});

// script 1
setInterval(function() {
    reload();
    bus.trigger('reload');
}, 1000);

// script 2
bus.on('reload', function() {
    // there was a reload in script 1, yay!
});

Answer 2

我找到了解决方案。我确定它不是最好的，但它确实有效。

正如您所指出的，我最终需要至少一个全局变量作为两个脚本之间的连接，并使用闭包来克服异步问题。请注意，我在重新加载中操作按钮，只是为了说明有时它不像在全局命名空间中移动代码那么容易：

在jsFiddle中查看：yay! this works!

以下是代码：

var intervalControl;
// main script
(function($){
    $(function(){
        var $playerButton = $('body').find('button.player'),
        reload = function() {
            console.log('reloading...');
            $playerButton.css('top', parseInt($playerButton.css('top')) + 1);
        };
        var interval = function(callback) {
            var timer,
                playing = false;
            this.play = function() {
                if (! playing) {
                    timer = setInterval(callback, 2000);
                    playing = true;
                }
            };
            this.pause = function() {
                if (playing) {
                    clearInterval(timer);
                    playing = false;
                }
            };
            this.play();
            return this;
        };
        intervalControl = function() {
            var timer = interval(reload); 
            return {
                play: function() {
                     timer.play();   
                },
                pause: function(){
                     timer.pause();   
                }
            }   
        }
    });
})(jQuery);

// Another script, available for specific users
(function($){
    $(function(){
        var $playerButton = $('body').find('button.player'),
            $icon         = $playerButton.children('i'),
            interval;
            buttonAction = function(e){
                e.preventDefault();
                if ($(this).hasClass('playing')) {
                    interval.pause();
                    $(this).removeClass('playing').addClass('paused');
                    $icon.removeClass('glyphicon-pause').addClass('glyphicon-play');
                }
                else {
                    interval.play();
                    $(this).removeClass('paused').addClass('playing');
                    $icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
                }
            },
            buttonInit = function() {
                $playerButton.on('click', buttonAction);
                interval = intervalControl();
            };
        buttonInit();
    });
})(jQuery);

欢迎任何更好的建议。

如何通过不同的脚本异步传递变量

2 个答案: