6

Асинхронная ф-я может вызываться из разных мест большого кода, с передачей коллбэка для возврата результата.

Есть ограничение: нельзя вызывать эту ф-ю чаще 3 раз в секунду.

Не могу сообразить, как проще сделать очередь задач.

Сделал два буфера: массив времён последних трёх вызовов times и массив объектов заданий tasks, где каждый содержит параметры вызова и callback.

Перед выполнением очередного вызова необходимая задержка определяется как неотрицательная разность текущего времени c моментом times[0]. После выполнения вызова, текущее время заносится в хвост: times.push(ts); times = times.slice(-3).

Ф-я вызывается с необх. таймаутом либо по поступлении первого объекта в пустую очередь, либо по завершении очередного задания из очереди.

Есть ли в каком-нибудь JS фреймворке похожий функционал, чтобы списать, и правильно ли я подхожу к задаче перестроения асинхронных вызовов в последовательность?

App.timeSpan = 1000;
App.times = [];
App.tasks = [];

// точка входа
App.api = function( method, params, callback) {
    var toWait, dt, ts = (new Date()).getTime();

    this.tasks.push({
        method: method,
        params: params,
        callback: callback
    });

    if( this.tasks.length == 1) {
        if( this.times.length > 2) {
            dt = ts - this.times[0];
            toWait = ( dt < this.timeSpan) ? this.timeSpan - dt : 0;
        } else {
            toWait = 0;
        }
        window.setTimeout(this.execute.bind(this), toWait);
    }
}

App.execute = function(){
    if( this.tasks.length == 0) return;

    // вызов ТОЙ ф-ии
    VK.api( this.tasks[0].method, this.tasks[0].params, this.executed.bind(this));
}

App.executed = function(r){
    var ts = (new Date()).getTime() // timestamp in seconds
        ,dt
        ,toWait
    ;

    this.times.push( ts);
    this.times = this.times.slice(-3);

    if( this.times.length > 2) {
        dt = ts - this.times[0];
        toWait = ( dt < this.timeSpan) ? this.timeSpan - dt : 0;
    } else {
        toWait = 0;
    }

    if( this.tasks.length > 1) {
        window.setTimeout(this.execute.bind(this), toWait);
    }

    this.tasks.shift().callback.call(this, r);
}
3
  • 500 – костыль на случай ошибки подсчета времени на том конце: «чтобы наверняка» не поспешить. Убрал отвлекающие костыли.
    – Sergiks
    16 июл 2015 в 10:48
  • @shatal мне кажется, вы не поняли вопрос. Если будет понятнее «на пальцах», то речь про приложение, обращающееся к api внешнего сервиса, у которого стоит ограничение на частоту вызовов: не более 3 в 1 секунду. Иначе вместо ожидаемого ответа вернётся ошибка. Вызовы к api нужны повсюду: и при заходе показать аватар юзера, и выполнить полезную нагрузку, и получить многостраничный список объектов (каждая стр. – новый вызов api). В любом случае, я уже разобрался.
    – Sergiks
    16 июл 2015 в 14:42
  • Про очередь и в вопросе написано, про «несанкционированно» вам, наверное, показалось.
    – Sergiks
    16 июл 2015 в 15:26

2 ответа 2

4

По-моему, радикально упростить код не получится. Получилось лишь сделать его чуть более "красивым":

//for tests
function mock(m, p, callback) {
    var time = Math.floor(Math.random() * 300);
    setTimeout(function() {
        callback(m + ' ' + p);
    }, time);
}

//for tests
function callbackMock(r) {
   console.log("Callbacked: " + r);
}

function App() { }

App.callsPerTimeSpan = 3;
App.timeSpan = 1000;
App.times = [];
App.tasks = [];
App.handling = false;
App.taskHandler = mock; //mock - for tests

App.api = function(method, params, callback) {
    this.tasks.push({
        method: method,
        params: params,
        callback: callback
    });
    if (!this.handling) {
        this.handling = true;
        this.execute();
    }
};

App.execute = function() {
    if (this.tasks.length == 0) {
        this.handling = false;
        return;
    }
    var toWait = 0;
    if (this.times.length == this.callsPerTimeSpan) {
        var ts = this.getCurrentTime();
        var dt = ts - this.times[0];
        toWait = (dt < this.timeSpan) ? this.timeSpan - dt : 0;
    }
    var task = this.tasks[0];
    var that = this;
    window.setTimeout(function() {
        that.taskHandler(task.method, task.params, that.executed.bind(that));
    }, toWait);
};

App.executed = function(r) {
    var ts = this.getCurrentTime();
    this.times.push(ts);
    this.times = this.times.slice(-this.callsPerTimeSpan);
    var task = this.tasks.shift();
    var that = this;
    setTimeout(function() {
        task.callback.call(that, r);
    }, 0); //async call
    this.execute();
};

App.getCurrentTime = function() {
    return (new Date()).getTime();
};

//for tests
for (var i = 0; i < 10; i++) {
    App.api(String.fromCharCode(i + 65), i, callbackMock);
}

"Красота" в первую очередь включает в себя отсутствующий дублированный код расчета времени и исполнения следующей задачи.

Пример с выводом отладочной информации в fiddle.

3
  • Спасибо за ясность! Вопрос: почему безопаснее держать флаг, чем считать кол-во задач в очереди? Ведь уйти из очереди они могут только по завершении выполнения.
    – Sergiks
    16 июл 2015 в 14:44
  • Так ведь JS не параллелится, всё в один тред (про web workers молчим!). Если начал выполняться .executed(), никакой другой кусок кода не стартанёт, пока не доиграет .shift(), и в tasks не станет 0.
    – Sergiks
    16 июл 2015 в 15:29
  • @Sergiks никогда, как говорится, не поздно узнать, что в JS поток должен выполниться полностью, прежде чем запустится другой. Теперь я это узнал :) У флага, в таком случае, остаётся лишь одно преимущество: он является чуть более гибким решением, чем сравнение с константой длины массива. Но это опять-таки имеет смысл, только если что-то в логике коде может поменяться. Про безопасность из ответа уберу.
    – Regent
    16 июл 2015 в 15:44
1

Есть ли в каком-нибудь JS фреймворке похожий функционал

Есть. В jQuery точно есть throttle и debounce, в других тоже что-то похожее. Вообще, гуглится замечательно. Да и реализуется несложно. Например, вот расширенная версия с комментариями.


там «проглатываются» лишние вызовы функции. В моей задаче этого нельзя допускать

Тогда так:

function queue(f, ms) {
  var calls = null;

  return function () {
    if (calls == null) {
      calls = [];
      setTimeout(function go() { // Гарантируем асинхронный вызов
        if (calls.length) {
          f.apply(null, calls.shift())
          setTimeout(go, ms);
        } else {
          calls = null;
        }
      });
    }

    calls.push(arguments);
  }
}

Проверка:

f = queue(function () { console.log(new Date, arguments) }, 1000)
f(1); f(1, 2); f({});
setTimeout(f, 3500);
setTimeout(f, 4500, [4, 5], "q");
setTimeout(f, 6000, 6);
setTimeout(f, 8000, 8);
setTimeout(f, 8500, 8.5);
setTimeout(f, 9000, 9);
setTimeout(f, 11000, 9);
7
  • throttle() и debounce() мне знакомы по underscore.js – там «проглатываются» лишние вызовы функции. В моей задаче этого нельзя допускать.
    – Sergiks
    16 июл 2015 в 12:45
  • Т. е. нужны все вызовы, но с задержкой в 3s? Это же ещё проще.
    – Qwertiy
    16 июл 2015 в 12:48
  • @Sergiks, дополнил ответ.
    – Qwertiy
    16 июл 2015 в 13:13
  • 3
    Два условия в вопросе: 1. Нужно делать не больше 3 запросов в секунду. 2. Нужно делать следующий запрос только после выполнения предыдущего.
    – Regent
    16 июл 2015 в 13:34
  • 2
    Интервал между запросами может быть и меньше 334 миллисекунд :) Главное, чтобы в любое "окно" из 1000 миллисекунд попадало не более трёх запросов. То есть запросы с timestamp 3ms, 90ms, 200ms, 1005ms, 1100ms - это нормально, а 3ms, 90ms, 200ms, 1005ms, 1050ms уже плохо, так как 90, 200, 1005 и 1050 попадают в одно секундное окно. Например, в 89 - 1088.
    – Regent
    16 июл 2015 в 15:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.