JSONP 响应未能存储在闭包中

Question

我正在通过 JSONP 发出 API 请求以避免跨域错误。我想将响应存储在闭包（函数表达式 "module"）中的变量中，该变量可通过两个 "public methods".

访问

其中一个方法 module.store 是 API 响应使用的回调。另一种方法使用 API 响应的内容更新 p 标签。

点击 "submit" 发起 API 请求后，我知道回调已成功调用，因为我可以在它消失之前短暂地看到更新后的显示。

我想我一定会在函数退出后失去响应，但闭包应该仍然能够访问私有变量。

如果我从浏览器中调用 requestJSONP()，它会起作用。

我无法在 JS fiddle 中重现该问题，因为它不喜欢 JSONP 请求。

HTML:

<body>
<header>Wikipedia Viewer</header>
<section>
    <div class="container">
        <p>default text</p>
        <form>
            <button>Submit</button>
        </form>
    </div>
</section>
</body>

JS:

document.addEventListener('DOMContentLoaded', addListenerToButton);

//callback for DOM load which adds a click event on the submit button
function addListenerToButton() {

var button = document.getElementsByTagName("button")[0];

button.addEventListener("click", requestJSONP); 
console.log("addListenerToButton");
};

//advoids cross browser origin error
function requestJSONP(searchTerm) {
    //dynamically create a script tag
    var scriptTag = document.createElement("script");
    //set url 
    scriptTag.src = "https://en.wikipedia.org/w/api.php?action=opensearch&search=covfefe&limit=10&namespace=0&format=json&callback=test";
    //append tag to head element 
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
    console.log("got to JSONP");
};

function test(data){
        module.store(data);
}

//callback invoked when API sends reponse
var module = (function(){
    var storedValue = [];
console.log("got to module");
    return {
        store: function(val){
            storedValue.push(val);
            console.log("got to module.store");
            displayArray(); 
        },

        retrieve: function(){
            return storedValue;
        },

    }

}());

function displayArray(){
    var stored = module.retrieve(); 
    pTag = document.getElementsByTagName("p")[0];
    text = pTag.textContent = stored;

}

Answer 1

默认行为（至少在 Chrome 中）是刷新页面，即清除存储的值。我已经覆盖了下面的默认行为：

function saveText(event) {
    debugger
    event.preventDefault()
    var userInput = document.getElementsByTagName("input")[0].value;

    if (userInput === "") {
        alert("Please enter a search term")
        return 
    }
    requestJSONP(userInput);
    console.log("saveText");
};

JSONP 响应未能存储在闭包中

JSONP response failing to be stored in a closure

javascript

ajax

closures

jsonp