[英]Adding an event listener to stop a timer started from another function jQuery
Sorry this is going to take a bit of explaining so you know what I'm trying to do here... 抱歉,这将需要一些解释,所以您知道我在这里想要做什么...
I'm having trouble with a timer function. 我在使用计时器功能时遇到麻烦。 Basically when the user hits the page, an Ajax request is made, the result of which starts a timer function.
基本上,当用户点击页面时,会发出Ajax请求,其结果将启动计时器功能。 They have a certain amount of time in which to make a payment (this is a block chain based payment app, payment is made via an external wallet - no user input is required on the payment page at all, no buttons to click etc).
他们有一定的时间进行付款(这是一个基于区块链的付款应用程序,通过外部钱包进行付款-完全不需要用户在付款页面上输入任何内容,无需单击任何按钮等)。 If the timer runs out the payment box resets.
如果计时器用完,付款框将重置。
But if the persistent Ajax calls running in the background find the users payment on the block chain I need to kill the timer as it is no longer required, but I need to keep the payment box open while the confirmations are being monitored until the transaction is complete. 但是,如果在后台运行的持久性Ajax调用在区块链上找到了用户付款,我就需要终止计时器,因为它不再需要了,但是我需要在监视确认的过程中保持付款框处于打开状态,直到进行交易为止。完成。
The trouble is I can't alter the already running timer function. 问题是我无法更改已经运行的计时器功能。 I've tried every way possible I could think of but nothing stops the original function from running and ultimately resetting the payment box while the transaction is ongoing (waiting for confirmations).
我已经尽力尝试了所有可能的方法,但是没有什么能够阻止原始功能的运行,并最终在交易进行中(等待确认)重置付款箱。
I have been reading about wrapping the timer function in an object and adding a listener but everything I found seemed really confusing to me. 我一直在阅读有关将Timer函数包装在一个对象中并添加一个侦听器的信息,但是我发现的一切似乎让我感到困惑。
Below is the relevant code. 以下是相关代码。
The function that starts the timer is being started by the Ajax response from another function... 启动计时器的功能正在由另一个功能的Ajax响应启动...
myTimer(expiry);
The expiry variable being passed is vital as it sets an intial on / off state for the timer (whether to display it or not from the first response). 传递的到期变量至关重要,因为它为计时器设置了初始的开/关状态(无论是否从第一个响应中显示它)。 So I need to keep that.
所以我需要保留。
This is the timer function... 这是计时器功能...
function myTimer(expiry) {
// If expiry set to 0 don't use the timer
if (expiry === 0) {
$('#timer').hide();
return;
}
var start = new Date();
var timeoutVal = Math.floor(expiry/100);
animateUpdate();
function updateProgress(percentage) {
$('#timerInner').css("width", percentage + "%");
}
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/expiry)*100);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
} else {
// Timer expired, clear box and show buy button again
$("#paymentWrap").empty();
$("#btn-Pay").show();
$("#btn-Pay").prop("disabled", false);
return;
}
}
}
}
This is the part that I need to "kill" on demand via another function coming from another Ajax response... 这是我需要通过来自另一个Ajax响应的另一个功能按需“杀死”的部分。
// Timer expired, clear box and show buy button again
$("#paymentWrap").empty();
$("#btn-Pay").show();
$("#btn-Pay").prop("disabled", false);
return;
Can somebody explain how I can add a variable listener to this function (maybe by creating it as an object?) so that I can change the chunk of code that triggers the bit above to include a new var called cancelled
that can be updated elsewhere in the script WHILE this function is running. 有人可以解释我如何向该函数添加变量侦听器(也许通过将其创建为对象吗?),以便我可以更改触发上面代码的代码块,以包括一个名为
cancelled
的新var,可以在其中的其他位置进行更新。该函数正在运行时的脚本。
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
if (cancelled === true) {
// Hide the timer div and kill the timer function
$("#timer").hide();
return;
}
} else {
// Timer expired, clear box and show buy button again
.......
I know this was really long winded, apologies upfront, but thanks for reading and looking forward to any help you can offer. 我知道这确实很长一段时间,很抱歉道歉,但是感谢您阅读并期待您能提供的任何帮助。
Cheers! 干杯!
You can define a global variable to reference setTimeout()
call and use cleaTimeout()
您可以定义一个全局变量来引用
setTimeout()
调用并使用cleaTimeout()
let timer = null; let then_ = new Date().getTime() + 10000; function fn() { timer = setTimeout(function() { console.log("doing stuff at " + new Date() , "time remaining to do stuff:", then_ - new Date().getTime()); if (new Date().getTime() < then_) { fn() } else { done() } }, 1000) } function done() { clearTimeout(timer); timer = null; console.log("done doing stuff at " + new Date()); } document.querySelector("button") .onclick = function() { if (timer) { done() } else { this.onclick = null; } } fn();
<button>clear timer</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.