如何在2000-10000毫秒范围内随机化setInterval执行间隔？

嘿，要搞定2000到10000毫秒之间的随机执行间隔，原来的setInterval就不太够用了——它的间隔是固定死的，没法动态调整。咱们换个思路，用setTimeout递归调用的方式来实现，每次执行完目标函数后，再设置下一个随机延迟的定时器就行。

修改后的完整代码 #

var myTimeout;

function showDiv() {
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).fadeIn(200).delay(3000).fadeOut(200);
  
  // 计算下一次的随机间隔：2000ms 到 10000ms 之间（包含两端数值）
  var randomInterval = Math.floor(Math.random() * (10000 - 2000 + 1)) + 2000;
  // 设置下一次执行的定时器
  myTimeout = setTimeout(showDiv, randomInterval);
}

function stopFunction() {
  clearTimeout(myTimeout); // 停止定时器
}

$(document).ready(function () {
  // 初始启动也用随机间隔，或者固定2000ms都可以
  var initialInterval = Math.floor(Math.random() * (10000 - 2000 + 1)) + 2000;
  myTimeout = setTimeout(showDiv, initialInterval);
});

关键细节说明 #

• 随机间隔计算：Math.floor(Math.random() * (max - min + 1)) + min 这个公式能确保我们得到包含min和max在内的随机整数，这里就是2000到10000之间的任意毫秒数。
• 递归调用逻辑：每次showDiv执行完毕（包括动画完成）后，会自动设置下一个定时器，完美实现每次间隔都随机的效果。
• 定时器管理：把原来的myVar改成myTimeout（只是语义更清晰），用来存储每次setTimeout返回的ID，这样stopFunction里用clearTimeout就能准确停止定时器。
• 避免任务堆积：和setInterval不同，这种方式会等上一次的fadeIn/fadeOut动画完全结束后，再设置下一次的定时器，不会出现多个动画叠加的问题。

内容的提问来源于stack exchange，提问作者Referee Andy