具有本地参数的Onclick全局函数

时间:2019-05-30 10:18:22

标签: javascript html arrays function object

a question about ordering XHR functions之后的跟进 这是递归的情况,其中sendRequest()正在创建一个带有指向自身的onclick链接的字段。该onclick链接存储了可变字,应在调用时将其输入到sendRequest中。

<script type="text/javascript">
function inputReq(){
    sendRequest(wordform.word.value)
}
function sendRequest(str){
    //we start by removing the now superfluous rows
    table=document.getElementById('table')
    while(table.rows.length>2){
        table.deleteRow(2);
    }
    var request = new XMLHttpRequest();
    console.log('sending request');
    request.open('GET', 'http://127.0.0.1:5000/api.html?query='+str, true);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            json=request.responseText;
            console.log(json);
            //json.forEach(function(obj) { 
            //});
            for (word in json){
                var row=table.insertRow();
                var scoreC=row.insertCell();
                var wordC=row.insertCell();
                scoreC.innerHTML=json[word];
                wordC.innerHTML=word;
                wordC.onclick=(function(i)  {sendRequest(i);})(word);
            }
        } else {
            console.log("Silence on the line");
        }
    }
    request.send();
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Query Page</title>
</head>
<body>
<h1>Query Page</h1>

<table id='table' style="width:100%">
<tr><form name='wordform'>
    <th>Concept: <input type="text" name="word"></th>
    <th><input type="button" onclick="inputReq()" value='Find Associations'></th>
</form></tr>
</body>
</html>

XHR响应如下:

{"milk": 1, "cheese": 3, "bread": 2}

我一直关注this schema,但此行正在调用该函数,而不是添加onclick链接:

wordC.onclick=(function(i)  {sendRequest(i);})(word);

1 个答案:

答案 0 :(得分:1)

由于它是IIFE(立即调用函数表达式),因此被立即调用。在其周围放置另一个功能。

wordC.onclick = () => (function(i) { sendRequest(i); })(word);

(上面的代码看起来好像没有周围的功能,但确实有-这是ES6箭头功能)。