英文:
Make html a tag href wait for async function in onclick to return?
问题
我有一个链接，其中有一个onclick，应该在href之前执行
<a class="btn btn-primary" href="?mode=full" onclick="req('name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>
被调用的JavaScript函数的相关部分如下：
function req(data='', method='GET', url='', lang='', el='null') {
const Http = new XMLHttpRequest();
Http.open(method, url);
// ...
const e = document.getElementById(el);
if (e && e.value != '' || !e)
Http.send(msg);
// 或者返回false，无论如何
}
现在只有在我设置以下代码时才起作用：
Http.open(method, url, false);
但是我的浏览器控制台会警告我，说在主线程上这样做已经不推荐了，而且即使我没有调用该部分（奇怪的是），它根本不允许我的脚本的一半工作。
如何正确地做到这一点？即使使它等待异步函数。
英文:
I have this link with an onclick that's supposed to execute before the href
<a class="btn btn-primary" href="?mode=full" onclick="req('name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>
And the relevant parts of the called js function looks like this:
function req(data='',method='GET',url='',lang='',el='null'){
const Http = new XMLHttpRequest();
Http.open(method,url);
...
const e = document.getElementById(el);
if (e && e.value != '' || !e)
Http.send(msg);
or return false whatever
Now this only works when I set
Http.open(method,url,false);
But I get warned from my browser's console about how doing this on the main thread is deprecated and it straight up doesn't allow half of my script to work even if I'm not calling that part(weird)
How does one properly do this? i.e make it await the async function
答案1
得分: 5
只需翻译代码部分：
Pass then `event` of the click to your function: `onclick="req(event, 'name=vm....`
Then your function can [`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) it, so that the default action of the click is not executed.
Now wait for your network request to return (probably want to use [`fetch()`](https://developers.google.com/web/updates/2015/03/introduction-to-fetch), that's much simpler than the old `XMLHttpRequest`).
Once the promise resolved, trigger the redirect to the target URL:
<body>
<a href="?mode=full" onclick="req(event, 'name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>
</body>
<script>
function req(event, data='',method='GET',url='/index.html?test') {
console.debug(event);
event.preventDefault();
fetch(url, {method: "POST"}).then(() => {
location.href = event.target.href;
});
}
</script>
英文:
Pass then event of the click to your function: onclick="req(event, 'name=vm....
Then your function can event.preventDefault() it, so that the default action of the click is not executed.
Now wait for your network request to return (probably want to use fetch(), that's much simpler than the old XMLHttpRequest).
Once the promise resolved, trigger the redirect to the target URL:
<body>
<a href="?mode=full" onclick="req(event, 'name=vmode&value=full','POST','/cookie')">Promeni rezim prikaza</a>
</body>
<script>
function req(event, data='',method='GET',url='/index.html?test') {
console.debug(event);
event.preventDefault();
fetch(url, {method: "POST"}).then(() => {
location.href = event.target.href;
});
}
</script>
But consider that your users may have to wait for the request in the background and don't understand what is going on.
If you only want to send some statistics data, you may want to consider using the new sendBeacon() API. It sends data (POST only) async in the background, so that the link target can be loaded for the user, while the browser works on the sendBeacon() requests in the background.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论