使用 Ext.util.TaskRunner 在负载掩码中显示时钟

Posted 2023-02-26

【中文标题】使用 Ext.util.TaskRunner 在负载掩码中显示时钟

【英文标题】：Using Ext.util.TaskRunner to display a clock in a load mask

【发布时间】：2016-08-26 18:38:51

【问题描述】：

使用 ExtJS 5.1.0。

真的想不出任何其他方法来做到这一点，但我需要一个计时器来在等待 Ajax 响应时显示在负载掩码中。在success，然后我会取消设置掩码并销毁计时器。

代码在没有Ext.util.TaskRunner 的情况下工作正常，所以我的修改是执行以下操作：

    task = runner.start(
        run:  function () 
            // show loadMask during request
            Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
        ,
        interval: 10
    );

    // payload for POST
    obj = 
        query: 
            payload: atom
        
    ;

    Ext.Ajax.request(
        cors: true,
        timeout: 600000, //default is 30 seconds
        useDefaultXhrHeader: false,
        url: url,
        jsonData: obj,
        headers: 
            'Accept': 'application/json'
        ,
        disableCaching: false,

        success: function(response) 
             // do stuff

             // stop loadMask
             Ext.getBody().unmask();
             Ext.util.TaskRunner.destroy(task);
        
    );

在success 上，它正在“做事”，但它现在没有破坏计时器，现在它没有移除掩码（这已得到确认，因为我收到一个错误：TypeError: Ext.util.TaskRunner.destroy is not a function. (In 'Ext.util.TaskRunner.destroy(task)', 'Ext.util.TaskRunner.destroy' is undefined) ...

我意识到TaskRunner 将继续运行，直到它被销毁或停止，但这似乎并没有按预期工作。

我最终需要在 Ajax 调用的生命周期中执行任务，并且我意识到我多次调用 LoadMask 来实现我需要的。

---- 编辑----

部分明白了：我缺少repeat 配置参数（我之前尝试过repeat 参数，没有使用interval 参数，但它不起作用，但这些组合是究竟需要什么才能让它工作。Doh！你认为他们会在文档中给出这个简单的用例作为示例，但是唉......）：

task = runner.start(
        run:  function () 
            // show loadMask during request
            Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
        ,
        interval: 10,
        repeat: 1
    );

这样，我不需要在对象上发出stop 或destroy。

但是，时钟没有按需要更新，这是有道理的，因为任务只运行一次。所以，看起来我仍然被困住了。

【问题讨论】：

不破坏计时器是什么意思？你是怎么确定的？您多次调用 mask ，但您只调用一次 unmask 。制作一个演示问题的小提琴，ajax 调用并不真正相关。

抱歉，关于使用destroy 方法时遇到的错误，我遗漏了一些关键信息。

【参考方案1】：

终于明白了！

这是有效的配置：

    var task, runner = new Ext.util.TaskRunner();

    task = runner.newTask(
        run:  function () 
            // show loadMask during request
            Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
        ,
        interval: 10000
    );

    task.start();

然后一个简单的task.stop(); 在成功回调发生后停止任务。缺少的键似乎正在定义一个NewTask. 有趣。猜猜这有助于更仔细地阅读 Sencha 文档中的示例。