添加一个事件监听器来停止从另一个函数jQuery

时间:2017-11-04 23:15:45

标签: javascript jquery timer

对不起,这需要一些解释,所以你知道我在这里要做什么......

我在使用计时器功能时遇到问题。基本上当用户点击页面时,会发出Ajax请求,其结果将启动计时器功能。他们有一定的时间进行支付(这是一个基于块链的支付应用程序,通过外部钱包进行支付 - 根本不需要在支付页面上输入用户,没有点击按钮等)。如果计时器用完,付款框将重置。

但是如果在后台运行的持久性Ajax调用找到块链上的用户付款,我需要终止计时器,因为它不再需要,但我需要在监控确认时保持付款箱打开,直到交易完成。

问题是我无法改变已经运行的计时器功能。我已经尝试过一切可能的想法,但是在交易正在进行时(等待确认),没有任何东西可以阻止原始功能的运行并最终重置付款箱。

我一直在阅读有关在对象中包装计时器功能并添加一个监听器的内容,但我发现的一切似乎让我感到困惑。

以下是相关代码。

启动计时器的功能是由另一个函数的Ajax响应启动的......

myTimer(expiry);

传递的到期变量至关重要,因为它为定时器设置了初始开/关状态(是否从第一个响应中显示它)。所以我需要保持这一点。

这是计时器功能......

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;
      } 
    }

}
}

这是我需要通过来自另一个Ajax响应的另一个函数按需“杀死”的部分......

// Timer expired, clear box and show buy button again
$("#paymentWrap").empty();
$("#btn-Pay").show();
$("#btn-Pay").prop("disabled", false);
return;

有人可以解释我如何为这个函数添加一个变量监听器(也许是通过创建它作为一个对象?),这样我就可以改变触发上述位的代码块来包含一个名为{{1}的新变量可以在脚本的其他地方更新,此函数正在运行。

cancelled

我知道这真的很长,很抱歉,但感谢您阅读并期待您能提供的任何帮助。

干杯!

1 个答案:

答案 0 :(得分:0)

您可以定义全局变量以引用setTimeout()来电并使用cleaTimeout()

&#13;
&#13;
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();
&#13;
<button>clear timer</button>
&#13;
&#13;
&#13;