我看到一些异步Javascript访问类方法时出现了一些奇怪的情况。
我有一些Javascript可以进行相当密集的搜索，这可能需要一些时间(大约1分钟(，所以我想异步运行它。
这是我的MVCE:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<div id="search-form">
<input id="search-terms" type="text" placeholder="enter search terms" />
<button id="search-button">Search</button>
</div>
</body>
<script type="text/javascript">
class Index {
constructor() {
this.internal_hash = {};
}
get_term_count(){
return Object.keys(this.internal_hash).length;
}
do_big_long_expensive_calculation(){
var i=0;
for(i=0; i<10000; i++){
this.internal_hash[i] = i+1;
}
return i;
}
search_text(text){
var results = this.do_big_long_expensive_calculation();
return results;
}
};
var search_index = new Index;
var search_results = null;
$(document).ready(function(){
async function searchIndex(){
let text = $('#search-terms').val();
console.log('searching index for text:'+text);
console.log('using index with terms:'+search_index.get_term_count());
search_results = search_index.search_text(text);
console.log('results:'+search_results.length);
return search_results;
}
$('#search-button').click(function(){
console.log('search button clicked')
var el = $(this);
el.prop("disabled", true);
el.text('Searching...');
searchIndex()
.then(function(){
console.log('search results found:'+(search_results.length));
el.text('Search');
el.prop("disabled", false);
})
.catch(reason => console.log(reason.message));
});
});
</script>
</html>
如果我打电话：
search_index.search_text('sdfssdfsf')
从浏览器控制台返回预期的10000。
但是，如果单击搜索按钮，console.log语句将为search_index.search_text返回的值打印出undefined。
为什么会这样？我唯一能想到的是async有一些我不知道的特点。异步Javascript是否不能访问与正常同步执行模型相同的内存？
您不能获取数字的长度，不能直接返回数字，也不能转换为字符串并获取长度
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<div id="search-form">
<input id="search-terms" type="text" placeholder="enter search terms" />
<button id="search-button">Search</button>
</div>
</body>
<script type="text/javascript">
class Index {
constructor() {
this.internal_hash = {};
}
get_term_count(){
return Object.keys(this.internal_hash).length;
}
do_big_long_expensive_calculation(){
var i=0;
for(i=0; i<10000; i++){
this.internal_hash[i] = i+1;
}
return i;
}
search_text(text){
var results = this.do_big_long_expensive_calculation();
return results;
}
};
var search_index = new Index;
var search_results = null;
$(document).ready(function(){
async function searchIndex(){
let text = $('#search-terms').val();
console.log('searching index for text:'+text);
console.log('using index with terms:'+search_index.get_term_count());
search_results = search_index.search_text(text);
console.log('results:'+search_results);
return search_results;
}
$('#search-button').click(function(){
console.log('search button clicked')
var el = $(this);
el.prop("disabled", true);
el.text('Searching...');
searchIndex()
.then(function(){
console.log('search results found:'+(search_results));
el.text('Search');
el.prop("disabled", false);
})
.catch(reason => console.log(reason.message));
});
});
</script>
</html>