javascript - 如何在发出 HTTP 请求时显示旋转器 (Appcelerator)

Question

目前，我正在尝试在发出 HTTP 请求时显示一个微调器，该请求将在调用完成时结束。我已经构建了几个不同的旋转器，但在调用开始时所有旋转器都停止动画。

var spinnerArray = [];
for (var i = 0; i < 20; i++) {
    spinnerArray.push('/images/preloaderGif/preloader'+ ("0" + i).slice(-2) + '.gif');
}
$.spinner.images = spinnerArray; 
$.spinner.duration = "200"; 
$.spinner.repeatCount = "0";

spin();

function spin(){
    $.spinner.start();
    callHTTP() //Prewritten function
    Ti.App.addEventListener('callEnd', function(e){
        $.spinner.stop();
    });
}

这会导致微调器永远不会出现。取出调用或将其嵌套在超时内会导致旋转器无限旋转，或直到超时结束。

有没有办法让旋转器在调用过程中继续旋转？

Answer 1

实际上，有一种更好且 super 简单的方法来显示指标。只需按照以下步骤操作即可。

1. 下载此小部件 Loading Indicator Widget 并将其添加到您的项目中的 app->widgets 文件夹中。如果小部件文件夹不存在，则创建它。

2. 添加此行 "nl.fokkezb.loading" : "*"进入 dependencies 中的 app->config.json 文件字典如下图所示。

3. 添加此行 Alloy.Globals.loading = Alloy.createWidget("nl.fokkezb.loading"); 在您的alloy.js 文件中

最后，您可以使用此代码在调用 HTTP 请求时正确显示/隐藏指示器。

function callHTTP() {
    if (!Ti.Network.online) {
       return;
    }

    Alloy.Globals.loading.show();

    var xhr = Ti.Network.createHTTPClient({
        onerror : function(e) {
            Alloy.Globals.loading.hide();

        },

        onload : function(e) {
            Alloy.Globals.loading.hide();

           // run your additional code here
        },
    });

    xhr.open("GET", url);
    xhr.send();
}


callHTTP();

使用此小部件，您无需为不同的项目编写冗长且容易出错的代码。只需添加此小部件，只需 2 行代码即可显示/隐藏加载指示器。

请记住一件事，XHR 错误/成功回调是您可以编写代码来隐藏指示器的唯一位置，因为您永远无法确定 HTTP 请求何时完成。