如何限制 setInterval 完成的迭代次数答案

【问题标题】：How to limit the number of iterations done by setInterval如何限制 setInterval 完成的迭代次数
【发布时间】：2017-02-07 08:20:26
【问题描述】：

我向我的用户展示视频广告。顺便说一句，我不主持这些广告；我从另一家公司得到它们。

当点击广告时，它会在用户的浏览器中留下一个 cookie。我创建了一个函数，每 10 秒检查一次 cookie 是否存在。

我想做的是限制这个函数可以运行的次数或它可以运行的秒数。

下面是函数：

function checkCookie()
{
var cookie=getCookie("PBCBD2A0PBP3D31B");
  if (cookie!=null && cookie!="")
  {
  alert("You clicked on an ad" );
  }

setInterval("checkCookie()", 10000);

所以回顾一下。我想限制setInterval("checkCookie()", 10000); 可以进行的迭代次数

【问题讨论】：

P.S.不要将字符串传递给setInterval，它使用eval！传递函数：setInterval(checkCookie, 10000);.

标签： javascript cookies

【解决方案1】：

当您调用 setInterval 时，它会返回一个间隔 ID，然后您可以通过调用 clearInterval 来停止它。因此，您需要计算变量中的迭代次数，一旦达到一定次数，请使用clearInterval 和setInterval 提供的ID。

var iterations = 0;
var interval = setInterval(foo, 10000);
function foo() {
    iterations++;
    if (iterations >= 5)
        clearInterval(interval);
}

Live example

【讨论】：

注意：这仅适用于 Mootools 而不是 jquery，尤其是在您的演示中
@Amine 这不是真的。它是普通的 js，它可以在任何地方工作。

【解决方案2】：

应该这样做：

function checkCookie() {
    var cookie = getCookie("PBCBD2A0PBP3D31B");
    if (cookie != null && cookie != "") {
        alert("You clicked on an ad");
    }
    if (counter > 10) clearInterval(clr);
    counter++;
    clr = setInterval(function(){checkCookie()}, 10000);
}
var counter = 0;
checkCookie();

【讨论】：

【解决方案3】：

WindowTimers.setInterval(func, delay[, param1, param2, ...])

setInterval 中的第 3 个^rd 参数是传递给区间函数的可选参数。请注意，IE9 及更早版本不支持这些可选参数。

我们可以通过避免使用全局或外部范围来利用这一点。如下所示。间隔函数通过opts 参数跟踪计数器的限制和当前增量。

runTask 函数接受一个强制的fn 参数，该参数返回一个布尔值以确定计时器的任务是否已完成。下面的示例中运行了两个任务，每个任务的运行速度和要满足的条件都不同。

前两个任务完成，但最后一个在条件满足之前用完了尝试。

function writeLine(el, text) {
  el.innerHTML += [].slice.call(arguments, 1).join(' ') + '\n';
}

function runTask(options, interval, limit) {
  var interval = setInterval(function(opts) {
    opts.incr = (opts.incr || 0) + 1;    
    if (opts.fn(opts)) {
      clearInterval(interval);
      writeLine(opts.el, '>> Task finished...');
    } else if (opts.incr > limit) {
      clearInterval(interval);
      writeLine(opts.el, '>> Exceeded limit of ' + limit);
    } else {
      writeLine(opts.el, '>> Attempt: ' + opts.incr + '/' + limit);
    }
  }, interval, options);
}

// 5 atttempts to reach 4 in 250ms.
runTask({
  fn : function(opts) { return opts.incr === 4; },
  el : document.querySelectorAll('div.col')[0]
}, 250, 5);

// 10 atttempts to reach 7 in 100ms.
runTask({
  fn : function(opts) { return opts.incr === 7; },
  el : document.querySelectorAll('div.col')[1]
}, 100, 10);

// 10 atttempts to reach 15 in 50ms.
runTask({
  fn : function(opts) { return opts.incr === 15; },
  el : document.querySelectorAll('div.col')[2]
}, 50, 10);

.col {
  display: inline-block;
  width: 175px;
  font-family: monospace;
  white-space: pre;
  border: thin solid black;
  vertical-align: top;
  padding: 4px;
}

<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

【讨论】：

【解决方案4】：

您只需要某种全局计数器变量来跟踪。例如，以下代码在每次页面加载时最多只运行 cookie 检查 20 次。

var numChecks = 0;

function checkCookie()
{
    ...

    numChecks++;
    if (numChecks < 20) setTimeout("checkCookie()", 10000);
}

setTimeout("checkCookie()", 10000);

【讨论】：

【解决方案5】：

将回调传递给 Interval 函数，该函数进而更新全局范围内的计数器：

var countIntervals = 0,
    intervalFunc = function(_callback){

        console.log(countIntervals);

        if(countIntervals > 5) {            
            clearInterval(setIntervalVar);
        } else {
            // do stuff
            _callback();
        }
    };

setIntervalVar = setInterval(intervalFunc.bind(null, function(){
    countIntervals++;
}), 500);

【讨论】：