在dojo xhr请求等待或加载时如何执行某些操作

Question

我对道场相对较新,虽然我已经设法做了我需要的所有事情,但有些事情我无法弄清楚如何处理它.

简而言之,我有一个表单,当我点击提交按钮时,请求进行得很好,而且大部分都是好的.但是,现在我希望在用户等待请求通过时每隔10秒左右更换div或某些内容...这是我无法弄清楚如何做的.

我想要放在div中的内容是静态的,所以不需要在另一个请求中发出请求或任何类似的疯狂,我想要的是内容每次都经常更改(例如,我想要一个div说"你一直在等待X秒并计算").

希望有人能帮我一把吗？提前致谢

Answer 1

由于其AOP方法,即dojo.connect(),Dojo正好在哪里闪耀.这是代码(也在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. 在XHR启动时调用onSend()方法的类phusick.Form和在XHR完成时调用onSendSuccess()方法(由于回调).
2. 使用observe()方法的类phusick.Observer需要一个参数:phusick.Form的实例.它会在调用传递形式的onSend()/ onSendSuccess()时启动和停止计时器.