通用方法

Question

我目前在我的某个网站上使用此代码，
我希望test.php立即加载，但是等到间隔之后。

然后如果每分钟继续，直到页面关闭。这可能导致非常大的带宽使用。

$(document).ready(function () {
    setInterval(function() {
        $.get("test.php", function (result) {
            $('#id').html(result);
        });
    }, 60000);
});

我想要达到的目标是什么。

在pageload上加载test.php 然后每60秒加载页面
如果页面已打开10分钟，则间隔时间加倍为120秒 20分钟增加到180秒间隔
30分钟增加到240秒间隔
等等。

感谢您的帮助

Answer 1

您可以使用setInterval每隔10分钟管理间隔增加，并使用setTimeout来使用该间隔。要在页面加载时立即执行代码，只需稍微重新排列代码：

$(document).ready(function () {
    var interval = 60000;

    setInterval(function () {
        interval += 60000;
    }, 600000); // every 10 minutes

    (function loop() {
        $.get("test.php", function (result) {
            $('#id').html(result);
        });
        setTimeout(loop, interval); // repeat after interval
    })(); // execute immediately
});

Answer 2

通用方法

可链式工厂功能

“即时”创建自定义计时器功能。

var timer1 = timerFactory( fnCallback, iRepeats, iDelay, iSteps );

虽然运行时可以设置所有参数。

timer1
    .setContext( { foo: true, bar: 'wow' } )
    .setCallback( function() { alert(this.bar) } )
    .setDelay( 10000 );

在过时时销毁计时器。

timer1.destroy()

var timerFactory = function( _fnCallback, _iRepeat, _iDelay, _iSteps, _oContext ) {

    // sanitize arguments and set default values
    if ( typeof _fnCallback != 'function' ) {
        _fnCallback = function() {};
    }
    if ( typeof _iRepeat != 'number' || _iRepeat < 1 ) {
        _iRepeat = 10;
    }
    if ( typeof _iDelay != 'number' || _iDelay < 0 ) {
        _iDelay = 60000;
    }
    if ( typeof _iSteps != 'number' || _iSteps < 0 ) {
        _iSteps = _iDelay;
    }
    if ( typeof _oContext != 'object' ) {
        _oContext = this;
    }

    var i = _iRepeat,
        _getInterval = function() {
            if ( --i ) {
                return _iDelay;
            }
            i = _iRepeat;
            return _iDelay += _iSteps; 
        },
        _handle = function() {
            _fnCallback.call( _oContext );
            _setTimeout = setTimeout(_handle, _getInterval())
        };
        _handle();

    // public methods (chainable)
    this.destroy = function() {
        clearTimeout( _setTimeout );
        _fnCallback = _iRepeat = _iDelay = _iSteps =
        _oContext = i = _getInterval = _handle = undefined;
        return this;
    }
    this.setCallback = function( fnCallback ) {
        _fnCallback = fnCallback;
        return this;
    }
    this.setRepeats = function( iRepeat ) {
        _iRepeat = iRepeat;
        return this;
    }
    this.setDelay = function( iDelay ) {
        _iDelay = iDelay;
        return this;
    }
    this.setSteps = function( iSteps ) {
        _iSteps = iSteps;
        return this;
    }
    this.setContext = function( oContext ) {
        _oContext = oContext;
        return this;
    }

    // deploy public methods
    return this;

};


$(document).ready(function () {

/* actual question
timerFactory(
    function(){ $.get("test.php", function (result) { $('#id').html(result); }) }
)
*/

    // examples
    timerFactory( function() {$('#_0').append('ajax default: 10, 6000, 6000<br>')} );
    timerFactory( function() {$('#_1').append('1, 0, 250<br>')}, 1, 0, 250 );
    timerFactory( function() {$('#_2').append('3, 1500<br>')}, 3, 1500 );
    timerFactory( function() {$('#_3').append('1, 3000, ->destroy<br>')}, 1, 3000 ).destroy();

    // example with context and alternative syntax
    myClass = { // context example
        methFOO : function() {$('#_4').append('ALT meth1<br>')},
        methBAR : function() {$('#_4').append('ALT meth2<br>')}
    }
    timerFactory( myClass.methFOO, 1, 1, 1 )
        .setCallback( function() {this.methBAR()} )
        .setRepeats( 3 )
        .setDelay( 1000 )
        .setSteps( 500 )
        .setContext( myClass );

});

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
div {
  border: 1px solid #999;
  box-sizing: border-box;
  float: left;
  height: 100%;
  width: 20%;
}

<div id="_0"></div>
<div id="_1"></div>
<div id="_2"></div>
<div id="_3"></div>
<div id="_4"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

首先使用ajax加载页面，然后增加间隔

2 个答案:

通用方法