비동기식 요청을 하기 전에 버튼을 비활성화 상태로 설정하고 백엔드 응답을 기다린 후 버튼을 활성화 상태로 설정하세요.
1. 이 기능을 구현하려면 JavaScript에서 비활성화된 속성을 사용하십시오.
const button = document.getElementById('myButton');
button.disabled = true; // 禁用按钮
그런 다음 비동기 요청이 결과를 반환한 후 버튼을 다시 활성화할 수 있습니다.
button.disabled = false; // 启用按钮
2. jQuery를 사용하는 경우 prop 메소드를 사용하여 버튼의 비활성화된 속성을 설정할 수 있습니다.
$('#myButton').prop('disabled', true); // 禁用按钮
그런 다음 비동기 요청이 결과를 반환한 후 버튼을 다시 활성화할 수 있습니다.
$('#myButton').prop('disabled', false); // 启用按钮
3. 사용자가 비동기 요청의 응답을 기다리는 동안 버튼을 반복적으로 클릭하는 것을 방지하려면 버튼을 비활성화하고 태그를 추가하여 백엔드 응답을 기다리고 있는지 식별할 수 있습니다.
let isWaitingResponse = false;
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
if (isWaitingResponse) {
return; // 如果正在等待响应，则不执行任何操作
}
isWaitingResponse = true; // 标记为正在等待响应
button.disabled = true; // 禁用按钮
// 发送异步请求
sendAsyncRequest().then(() => {
// 请求成功后执行的操作
}).catch(() => {
// 请求失败后执行的操作
}).finally(() => {
isWaitingResponse = false; // 标记为不再等待响应
button.disabled = false; // 启用按钮
});
});
이런 방식으로 비동기 요청 응답을 기다리는 동안 사용자가 버튼을 다시 클릭하면 무시됩니다. 동시에 비동기 요청 응답이 끝날 때까지 기다린 후 버튼은 자동으로 사용 가능 상태로 돌아갑니다.
4. Vue에서는 다음과 같은 방법으로 버튼을 비활성화할 수 있습니다.
- 버튼이 비활성화되었는지 여부를 저장하기 위해 데이터에 변수를 정의합니다.
data() {
return {
isButtonDisabled: false
}
}
- 버튼의 비활성화된 속성을 템플릿의 이 변수에 바인딩합니다.
<button :disabled="isButtonDisabled" @click="sendRequest">发送请求</button>
- sendRequest 메소드에서 버튼을 비활성화하고 비동기 요청을 보냅니다.
methods: {
async sendRequest() {
this.isButtonDisabled = true; // 禁用按钮
try {
// 发送异步请求
const response = await axios.post('/api/someEndpoint', {
data: 'someData' });
console.log(response);
} catch (error) {
console.error(error);
} finally {
this.isButtonDisabled = false; // 启用按钮
}
}
}
이렇게 하면 비동기 요청이 이루어지면 버튼이 비활성화되고 요청이 완료되고 응답될 때까지 다시 활성화되지 않습니다.
axios 라이브러리를 사용하여 GET 요청을 시작하고 .then 메서드를 통해 성공 및 실패 콜백 함수를 처리합니다. 요청이 성공하면 서버에서 반환한 데이터를 data 변수에 할당하고 로그를 출력하며, 요청이 실패하면 콘솔에 오류 메시지를 출력한다.
// 定义一个变量用于保存请求的数据
let data = null;
// 发起请求
axios.get('/api/taskList')
.then(response => {
// 请求成功，将返回的数据赋值给 data 变量
data = response.data;
console.log('请求成功', data);
})
.catch(error => {
// 请求失败，打印错误信息
console.error('请求失败', error);
});