为AJAX添加等待效果（spin.js）

在WEB开放中，如果使用了AJAX，那么如果服务器不能马上返回结果，希望能有个等待的东西来提示用户。

spin.js就是专门用来实现等待的效果，一个效果图如下：

它主要有以下特点

非图片和CSS的扩展
不需要额外的依赖（如jQuery)
能自由的配置效果
能在绝大多数浏览器下运行（包括IE6）

代码示例

为了方便使用，以及加上一层遮罩层来更好的让用户明白程序没有死掉，此时需要等待，

我们可以写出如下的JS代码（loading-control.js），调用方式为：

loading_control.start() //开始等待，并且创建了一个透明的遮罩层和使用了spin.js等待效果
loading_control.stop() //停止等待，遮罩层设为隐藏和并停用spin.js等待效果

/**
 * Created by hrwhisper on 2016/4/25.
 */
var loading_control = {
    opts: {
        // more options: http://fgnass.github.io/spin.js/
        length: 28,
        width: 14,
        radius: 42,
        color: "#fff",
        scale: 0.5,
        opacity: 0.2,
        position: "fixed"
    },
    spinner: null,
    div_wait: null,
    div_wait_bg: null,

    start: function () {
        if (!this.div_wait) {
            var div = document.createElement("div");
            div.id = "foo";
            document.body.appendChild(div);
            this.div_wait = div;
        }

        if (!this.div_wait_bg) {
            var div = document.createElement("div");
            div.id = "waiting-bg";
            div.style.cssText = "width:100%; height:100%; background-color:#000; filter:alpha(opacity=60);-moz-opacity:0.6; opacity:0.6; position:fixed; left:0px; top:0px; display:none;  z-index:1000;";

            document.body.appendChild(div);
            this.div_wait_bg = div;
        }

        if (!this.spinner) {
            this.spinner = new Spinner(this.opts);
        }

        this.div_wait_bg.style.display = "block";
        this.spinner.spin(this.div_wait);
    },

    stop: function () {
        if(this.spinner)
            this.spinner.stop();
        this.div_wait_bg.style.display = "none";
    }
};

使用例子1

假设我们是点击按钮，然后采用AJAX与服务器进行交互（下面的代码假设两秒钟），然后之后停止等待效果。

这个例子的目的是方便测试，用到了JS版本的time.sleep，详情见stackoverflow JS版本的time.sleep

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>spin.js Demo</title>
</head>
<body>
    <script src="./spin.min.js"></script>
    <script src="./loading-control.js"></script>
    <button onclick="start_do_something()">开始</button>
<script>
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function start_do_something() { #AJAX
  loading_control.start();
  await sleep(2000);
  loading_control.stop();
}
</script>
</body>
</html>

使用例子2

下面是真实的ajax例子：

function get_topic_result() {
    loading_control.start();
    $.ajax({
        url: 'stream_trends',
        data: userTopicParam.getParam(),
        success: function (v) {
            resultStore.update(v);
            loading_control.stop();
        },
        error: function (v) {
            console.log(v);
            loading_control.stop();
        },
        dataType: 'json'
    });
}

小结

本文简单的介绍spin.js，并且给了demo，

spin.js的地址为http://fgnass.github.io/spin.js/