Как ответить на событие JavaScript, только если оно запущено однажды и затем не запущено снова в течение некоторого периода времени?

Это действительно хороший подход, доступный на unscriptable.com :

Function.prototype.debounce = function (threshold, execAsap) {
    var func = this, // reference to original function
        timeout; // handle to setTimeout async task (detection period)
    // return the new debounced function which executes the original function 
    // only once until the detection period expires
    return function debounced () {
        var obj = this, // reference to original context object
            args = arguments; // arguments at execution time
        // this is the detection function. it will be executed if/when the 
        // threshold expires
        function delayed () {
            // if we're executing at the end of the detection period
            if (!execAsap)
                func.apply(obj, args); // execute now
            // clear timeout handle
            timeout = null;
        };
        // stop any current detection period
        if (timeout)
            clearTimeout(timeout);
        // otherwise, if we're not already waiting and we're executing at the 
        // beginning of the waiting period
        else if (execAsap)
            func.apply(obj, args); // execute now
        // reset the waiting period
        timeout = setTimeout(delayed, threshold || 100);
    };
}

Это позволит вам сделать:

// call the function 200ms after the bounds_changed event last fired:
google.maps.event.addListener(map, 'bounds_changed', (function() {
  // here goes an ajax call
}).debounce(200));

// call the function only once per 200ms:
google.maps.event.addListener(map, 'bounds_changed', (function() {
  // here goes an ajax call
}).debounce(200,true));

Если вы предпочитаете не дополнять Function.prototype , существует отдельная функция debounce (func, threshold, execAsap) доступно в сообщении блога .

Этот код гарантирует, что с момента последнего запуска события прошло полсекунды, прежде чем выполнить свое действие (закомментированный TODO ). Я думаю, это то, что вам нужно.

var mapMoveTimer;
google.maps.event.addListener(map, 'bounds_changed', function(){
  clearTimeout(mapMoveTimer);
  mapMoveTimer = setTimeout(function(){
    // TODO: stuff with map
  }, 500); 
});

Одним из быстрых и грязных решений было бы реже вызывать сервер:

var requestCounter = 0;
var frequency = 50;

google.maps.event.addListener(map, 'bounds_changed', function() {
    if((++requestCounter % frequency) == 0){
            // here goes an ajax call (also, optionally reset the counter here)
    }
});

В качестве альтернативы, я сделал нечто подобное, где я сбрасывал таймер каждый раз, когда "слышал" от пользователя. По истечении таймера он вызвал мое действие. Таким образом, таймер постоянно пытается сработать, но если пользователь что-то делает, таймер сбрасывается. В конце концов, пользователь перестает двигаться достаточно долго, чтобы таймер мог вызвать это событие.

google.maps.event.addListener(map, 'bounds_changed', userInput);

function userInput() {
    resetTimer();
}

Где resetTimer () очищает / запускает таймер. Это будет выглядеть примерно так:

var inputTimer = null;
var timeLimit = 500;

function resetTimer() {
    if(inputTimer != null) clearInterval(inputTimer);
    inputTimer = setTimeout('contactServer()', timeLimit);
}

function contactServer() {
    // here goes an ajax call
}

Я не тестировал, что это компилируется, но он должен дать вам основную идею. Преимущество этого кода в том, что он достаточно модульный, чтобы работать на многих других языках с небольшими изменениями. Я следую аналогичной логике в ActionScript. Кроме того, его очень легко читать, логически отслеживать и поддерживать (через 6 месяцев, когда вы забудете, как работает ваш код).

Надеюсь, это в какой-то мере поможет,

- gMale

Это код Brenton Alker, но перенесенный в полезную функцию.

var frequencyReduce = function(delay, callback){
    var timer;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(callback, delay);
    };
};

google.maps.event.addListener(map, 'bounds_changed', frequencyReduce(500, function(){
    // here goes an ajax call
}));