Question

我正在尝试为通过单独的setTimeout()函数启动的.on('click')添加额外的时间。

请按照我的代码描述来了解发生了什么

// my control opacity jQuery object
var $controlOpacity = $('#control-opacity');

// when the child button is clicked it reveals my input range slider
$controlOpacity.on('click','BUTTON', function() {

    // this toggles a open class to reveal my input range slider
    $controlOpacity.toggleClass('open');

    // begin the 5 second set timeout function 
    setTimeout(function(){

        // removes the open class to hide my input range slider
        $controlOpacity.removeClass('open');

    }, 5000);

});

// my input range slider inside my control opacity div
$('INPUT', $controlOpacity).change(function() {

    // how can I add another 5 seconds to setTimeout function via this function?

});

因此，当我的输入更改功能触发时，我希望能够再通过setTimeout函数向当前运行的.on('click')函数再添加5秒

我敢肯定有一种明显的方法可以做到这一点，但是实现这一目标的最干净的jQuery解决方案是什么？

谢谢

Answer 1

您无法更改正在进行的setTimeout的超时-而是必须在现有超时上显式clearTimeout，然后以新的持续时间再次调用setTimeout。为此，您将需要一个持久变量，该变量会记录下一次超时（如果有）是由于触发而导致的，否则为0-当第二个侦听器触发时，请检查该变量与Date.now()之间的差异以找出新超时需要持续多长时间：

const removeFn = () => {
  $controlOpacity.removeClass('open');
  triggerAt = 0;
};
let timeout;
let triggerAt = 0;

$controlOpacity.on('click','BUTTON', function() {
  $controlOpacity.toggleClass('open');
  timeout = setTimeout(removeFn, 5000);
  // Set triggerAt so we can determine how long the timeout has left later
  triggerAt = Date.now() + 5000;
});

$('INPUT', $controlOpacity).change(function() {
  // Clear the existing timeout, if it exists
  clearTimeout(timeout);
  // If no timeout is running, return early
  if (!triggerAt) return;
  // Figure out how much time was remaining on the existing timeout
  const remaining = triggerAt - Date.now();
  // Set the new timeout for 5000 ms plus however long the old timeout had left
  timeout = setTimeout(removeFn, remaining + 5000);
  triggerAt += 5000;
});

ES5版本：

var removeFn = function() {
  $controlOpacity.removeClass('open');
  triggerAt = 0;
};
var timeout;
var triggerAt = 0;

$controlOpacity.on('click','BUTTON', function() {
  $controlOpacity.toggleClass('open');
  timeout = setTimeout(removeFn, 5000);
  // Set triggerAt so we can determine how long the timeout has left later
  triggerAt = Date.now() + 5000;
});

$('INPUT', $controlOpacity).change(function() {
  // Clear the existing timeout, if it exists
  clearTimeout(timeout);
  // If no timeout is running, return early
  if (!triggerAt) return;
  // Figure out how much time was remaining on the existing timeout
  var remaining = triggerAt - Date.now();
  // Set the new timeout for 5000 ms plus however long the old timeout had left
  timeout = setTimeout(removeFn, remaining + 5000);
  triggerAt += 5000;
});

根据您的问题，此将现有的超时时间延长 5000毫秒-另一种方法是，只需清除现有的超时时间，然后将新的超时时间设置为5000毫秒将来，它将花费更少的代码，因为您只需要跟踪是否正在进行的超时，而不是剩余的时间：

const removeFn = () => { $controlOpacity.removeClass('open'); running = false; }; let timeout; let running = false; $controlOpacity.on('click','BUTTON', function() { $controlOpacity.toggleClass('open'); timeout = setTimeout(removeFn, 5000); running = true; }); $('INPUT', $controlOpacity).change(function() { clearTimeout(timeout); if (!running) return; timeout = setTimeout(removeFn, 5000); });

ES5版本：

var removeFn = function() { $controlOpacity.removeClass('open'); running = false; }; var timeout; var running = false; $controlOpacity.on('click','BUTTON', function() { $controlOpacity.toggleClass('open'); timeout = setTimeout(removeFn, 5000); running = true; }); $('INPUT', $controlOpacity).change(function() { clearTimeout(timeout); if (!running) return; timeout = setTimeout(removeFn, 5000); });

如果在change类不存在的情况下不可能触发open事件，则它变得更加容易，因为不需要检查超时是否在运行：

const removeFn = () => { $controlOpacity.removeClass('open'); }; let timeout; $controlOpacity.on('click','BUTTON', function() { $controlOpacity.toggleClass('open'); timeout = setTimeout(removeFn, 5000); }); $('INPUT', $controlOpacity).change(function() { clearTimeout(timeout); timeout = setTimeout(removeFn, 5000); });

ES5版本：

var removeFn = function() { $controlOpacity.removeClass('open'); }; var timeout; $controlOpacity.on('click','BUTTON', function() { $controlOpacity.toggleClass('open'); timeout = setTimeout(removeFn, 5000); }); $('INPUT', $controlOpacity).change(function() { clearTimeout(timeout); timeout = setTimeout(removeFn, 5000); });

Answer 2

对SomePerformance的类似回答，但是我会考虑创建一个为您处理计时器清除和设置的函数。从本质上讲，重点是相同的-您不能向计时器添加时间。您必须清除计时器并重新启动新计时器。

std::unique_ptr<boost::asio::ip::udp::socket> udp_socket;
const char* data_ptr = readFile();
udp_socket->send_to(boost::asio::mutable_buffer(data_ptr, dataSize), endpoint);

jQuery在输入更改时扩展setTimeout函数

2 个答案: