there is a store in which there are goods, you need to do so that if a product is deleted, a window will appear in which it will be written: The product was deleted, if it was an error, click the Cancel button, the user has 20 seconds to cancel cancellation, otherwise The API is sent a delete request. My problem is that I do not know how to do this so if I try to refresh the page or close the browser, send the request without waiting for 20 seconds

function deleteProduct() { var $alert = $('<div class="error-messege"><h2>УДАЛЕНИЕ</h2><p>Товар был удален, если это была ошибка, нажмите кнопку «Отмена»</p><button class="cancel">Отмена</button>'); $(".error-container").append($alert); setTimeout(function() { $alert.fadeOut(10000); }, 10000); } $("#click").click(function(){ //тут должен начатся отщет времени 20 сек либо закрытие браузера, после которого отправляется XMLHttpRequest(), а при нажатии отмена действие отменяется deleteProduct(); } ); 
 .error-messege { width: 336px; text-align: center; background: #1c2942; color: #ce4d76; padding: 22px; border-radius: 4px; margin-bottom: 25px; } .error-messege h2 { padding-bottom: 10px; font-size: 14px; font-family: 'FranklinGothicDemi'; text-transform: uppercase; letter-spacing: 1.5pt; } .error-messege p { font-size: 14px; letter-spacing: 1.5pt; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="click" value="УДАЛИТЬ ТОВАР"> <div class="error-container"></div>

  • one
    You can use $( window ).unload(function(){}) so that when you close the browser or tab, including early to send a removal request. - Moonvvell

1 answer 1

In general, the essence is briefly:
1. Delete do in timer
2. Output the timer to a variable, and when canceled, clear

 var delTimer; function deleteCancel() { if( delTimer ) clearTimeout(delTimer); } function deleteProduct() { var $alert = $('<div class="error-messege"><h2>УДАЛЕНИЕ</h2><p>Товар был удален, если это была ошибка, нажмите кнопку «Отмена»</p><button class="cancel" onclick="deleteCancel()">Отмена</button>'); $(".error-container").append($alert); delTimer = setTimeout(function() { //тут должен начатся отщет времени 20 сек либо закрытие браузера, после которого отправляется XMLHttpRequest(), а при нажатии отмена действие отменяется $alert.fadeOut(10000); }, 10000); } $("#click").click(function(){ deleteProduct(); }

I did not check, the idea should catch;)