使用Ion.RangeSlider遇JSON加载问题：无法设置from字段值

我一眼就看出问题所在了——你的loaddata()函数是异步操作（XMLHttpRequest默认是异步的），当你把它赋值给from参数时，AJAX请求还没完成，函数实际返回的是undefined，所以滑块根本拿不到正确的初始值。

解决方案1：拿到异步数据后再初始化滑块 #

最直接的办法是把滑块的初始化逻辑放到AJAX的成功回调里，确保你已经拿到了JSON数据再创建滑块：

$(function(){ 
    'use strict'

    function loaddata(){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                console.log(myObj.response_time);
                
                // 确认拿到数据后再初始化滑块
                $('#rt').ionRangeSlider({
                    min: 100,
                    max: 100000,
                    step: 10,
                    from: myObj.response_time, // 这里能正确拿到值了
                    postfix: "ms",
                    prefix: "Response Time: "
                });
            }
        };
        xmlhttp.open("GET", "api/settings.json", true);
        xmlhttp.send();
    }

    loaddata();
});

解决方案2：先初始化滑块，再用update方法动态赋值 #

如果你需要先渲染滑块，之后再通过AJAX更新值，可以使用Ion.RangeSlider提供的update方法：

$(function(){ 
    'use strict'

    // 先初始化滑块，设置一个临时的默认from值
    var sliderInstance = $('#rt').ionRangeSlider({
        min: 100,
        max: 100000,
        step: 10,
        from: 100, // 临时默认值
        postfix: "ms",
        prefix: "Response Time: "
    }).data('ionRangeSlider');

    function loaddata(){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                // 调用update方法更新滑块的from值
                sliderInstance.update({
                    from: myObj.response_time
                });
            }
        };
        xmlhttp.open("GET", "api/settings.json", true);
        xmlhttp.send();
    }

    loaddata();
});

为什么原来的代码无效？ #

异步操作（比如AJAX）不会阻塞代码执行——当你执行from: loaddata()时，loaddata里的AJAX请求刚发出去，函数就直接返回了（此时返回值是undefined），滑块初始化时自然拿不到JSON里的response_time值。只有等AJAX请求完成、回调函数触发时，你才能拿到正确的数据，这时候再处理滑块才有效。

内容的提问来源于stack exchange，提问作者user3149734