Question

我以前使用过此代码，但我现在不太确定我已将HTML控件与jQueryUI Widget分开了。

目前，计时器正常启动，但在一次打勾后我丢失了对_refreshTimeout的引用。也就是说，在第一次打勾后，取消选中我的PlanViewRefreshCheckbox不会阻止我的计时器运行。

我有两个JavaScript文件，PlanView.js和PlanViewCanvas.js。

PlanView.js看起来像这样：

(function ($) {
    var _minZoom = -2.0;
    var _maxZoom = 2.0;
    var _stepZoom = (_maxZoom - _minZoom) / 100;
    var _refreshTimeout = null;
    var _refreshInterval = 60000; //One minute

    $(document).ready(function () {
        //Initialize Refresh combo box.
        $('#PlanViewRefreshCheckbox').click(function () {
            if ($(this).is(':checked')) {
                var planViewCanvas = $('#PlanViewCanvas');
                //Binding forces the scope to stay as 'this' instead of the domWindow (which calls setTimeout).
                _refreshTimeout = setTimeout(function(){planViewCanvas.PlanViewCanvas('refresh', _refreshInterval, _refreshTimeout)}.bind(planViewCanvas), _refreshInterval)
            }
            else {
                clearTimeout(_refreshTimeout);
            }
        });
    }
})(jQuery);

和PlanViewCanvas.js包含一个jQueryUI小部件：

(function ($) {
    $.widget("ui.PlanViewCanvas", {
        //other properties and methods not-relevant to problem declared here.
        refresh: function (refreshInterval, refreshTimeout) {
            var self = this;
            _stage.removeChildren();
            self.initialize();
            //Binding forces the scope to stay as 'this' instead of the domWindow (which calls setTimeout).
            refreshTimeout = setTimeout(function () { self.refresh(refreshInterval, refreshTimeout) }.bind(self), refreshInterval);
        },
    }
})(jQuery);

看起来我的行为不正确吗？

编辑：我认为答案可能是使用setInterval而不是setTimeout。

Answer 1

第一个问题是你忘记了下划线

refreshTimeout应为_refreshTimeout

第二，你的变量需要是全局的才能在两个文件中访问，所以在函数之外声明它：

var _minZoom = -2.0;
var _maxZoom = 2.0;
var _stepZoom = (_maxZoom - _minZoom) / 100;
var _refreshTimeout = null;
var _refreshInterval = 60000; //One minute

(function ($) {
   ....
})(jQuery)

Answer 2

答案非常'哦，derp。'

    //Initialize Refresh combo box.
    $('#PlanViewRefreshCheckbox').click(function () {
        if (this.checked) {
            _refreshTimeout = setInterval(function(){$('#PlanViewCanvas').PlanViewCanvas('refresh')}, _refreshInterval)
        }
        else {
            clearTimeout(_refreshTimeout);
        }
    });

Answer 3

您无法通过引用传递值。我看到两个选择：

传递一个Object。如果从两个变量引用它，则可以在两个范围中访问其属性。
将功能分为两个功能：一个是主控间隔循环并触发刷新功能，另一个是要刷新的东西。 refreshTimeout变量仅属于第一个变量的范围。点。如果经常需要，可以将间隔函数添加到窗口小部件。

如何通过引用传递超时？或者更好的实施方式？

3 个答案: