Question

我做的事情有点可怕而我知道，但我不确定如何避免这个问题。

我有3个json文件，2个有效数据，1个只有空 - 只是想要一个有效的json文件，表示什么都不加载。在我的网站上，我有一个Twitter Typeahead控件。在加载我的Typeahead的源代码时，我有时需要将两者上面提到的有效json文件设置为源，有时我只需要包含一个有效文件，然后将第二个源设置为加载空文件。

以下是代码：

// Typeahead setup
$(function() {

/*
 * TODO: This is synchronous, so not ideal.
 */
var sourceTwoUrl = "data/empty.json";
$.ajax({url: "isSourceTwoUserEnabled.php", async: false,
    success: function(data) {
        if (data == '1') {
            sourceTwoUrl = "data/source2.json"
        }
    }
});

// Setup and instantiate the Bloodhound suggestion engine for source 1
var sourceOne = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'data/source1.json'
    }
});
sourceOne.initialize();

// Setup and instantiate the Bloodhound suggestion engine for source 2 results,
// using whichever json file was determined above (empty or valid source2.json)
var sourceTwo = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        cache: false,
        ttl: 1,
        url: sourceTwoUrl
    }
});
sourceTwo.initialize();

// Instantiate the actual typeahead control with the 2 data sources loaded above
$('#search .typeahead').typeahead({
        highlight: true,
        hint: true,
        minLength: 2
    },
    {
        name: 'sourceOne',
        source: sourceOne,
        limit: 12
    },
    {
        name: 'sourceTwo',
        source: sourceTwo,
        limit: 6
    }
);

});

现在这很好用，但是，我知道同步调用很糟糕（并且已弃用），所以我想尽可能避免使用它。因此，这有点可怕 - 在我的ajax电话中async: false。我知道同步调用会导致糟糕的用户体验，但是如果在返回isSourceTwoUserEnabled.php的结果之前UI和Typeahead加载，它每次都使用empty.json文件，因此我们从未看到任何来自source2.json的结果。

那么，更好的方法是什么？

注意，如果在用户启用后第一次没有使用source2.json，那也没关系;如果更好的设计导致Typeahead没有source2.json结果，直到他们在启用后第二次加载它，那是可以接受的。

设计：根据Ajax响应设置Typeahead Source

0 个答案: