Как сделать что-то, пока запрос dojo xhr ожидает или загружается - PullRequest
Новая
       4

Как сделать что-то, пока запрос dojo xhr ожидает или загружается

1 голос
/ 15 декабря 2011

Я относительно новичок в додзё, и хотя мне удалось сделать все, что мне нужно , есть некоторые вещи, которые я просто не могу понять, как с этим справиться.

Проще говоря, у меня есть форма, и когда я нажимаю кнопку отправки, запрос проходит нормально, и по большей части все хорошо.Тем не менее, теперь я хочу, чтобы содержал в div или некотором контенте, который меняется каждые 10 секунд или около того, пока пользователь ждал запроса, чтобы пройти ... это то, что я не могу понять, какделать.

Содержимое, которое я хочу поместить в div, является статическим, поэтому нет необходимости иметь запрос внутри другого запроса или какое-либо подобное безумие, все, что я хочу, - это то, что контент меняется очень частонапример, скажем, я хочу div, который говорит: «Вы ждали X секунд и считали»).

Надеюсь, кто-нибудь может мне помочь с этим?Заранее спасибо

Ответы [ 2 ]

7 голосов
/ 15 декабря 2011

Именно там, где Dojo сияет благодаря подходу AOP, то есть dojo.connect (). Вот код (а также в jsFiddle ): 

dojo.require("dojox.timing");
dojo.require("dijit.form.Button");

dojo.declare("phusick.Form", null, {

    send: function() {
        var def = dojo.xhrPost({
            url: "/echo/json/",
            content: {
                json: dojo.toJson({data: "some data"})
            },
            handleAs: "json"
        });

        def.addCallback(this, "onSendSuccess");
        this.onSend();
    },

    onSend: function() {},

    onSendSuccess: function(result) {} 
});

dojo.declare("phusick.Observer", null, {

    observe: function(form) {
        this.form = form;
        this.interval = 5;
        this.timer = new dojox.timing.Timer(this.interval);
        dojo.connect(this.timer, "onStart", this, function() {this.timeElapsed = 0});
        dojo.connect(this.timer, "onTick", this, "onTick");
        dojo.connect(form, "onSend", this.timer, "start");
        dojo.connect(form, "onSendSuccess", this.timer, "stop");
    },

    onTick: function() {
        this.timeElapsed += this.interval;
        dojo.byId("output").innerHTML = this.timeElapsed + " ms";
    }

});


dojo.ready(function() {
    var form = new phusick.Form();
    var observer = new phusick.Observer();
    observer.observe(form);

    dojo.connect(dijit.byId("sendBtn"), "onClick", function() {
        form.send();
    });

});
  1. Класс phusick.Form, который вызывает метод onSend () при запуске XHR и метод onSendSuccess () при завершении XHR (благодаря обратному вызову).
  2. Класс phusick.Observer с методом наблюдаем (), для которого требуется один параметр: экземпляр phusick.Form. Он запускает и останавливает таймер при вызове onSend () / onSendSuccess () переданной формы.
0 голосов
/ 15 декабря 2011

Простым решением было бы

  1. Запустить запрос
  2. Запустить setInterval, чтобы сделать ваши вещи или показать загрузочный GIF или любой другой
  3. Когда запрос вернетсяОтмените то, что вы сделали в части 2. 
// 1
var req = dojo.xhr( /*...*/ );

// 2 
var inter = setInterval(function(){
    console.log("waiting..."); //do stuff
}, 10000); //time in miliseconds

//3
function undo(){
    clearInterval(inter);
} 
req.then(undo, undo); //undo either on sucess or on error
...