如何在不点击的情况下，每隔几秒执行一次代码，在点击的情况下，直接执行代码？

在不点击的情况下，每隔几秒隐藏当前DIV,显示下一个DIV，并开始下一个DIV的倒计时
例如在不点击的情况下，5秒后pager1设置为display:none;，并且pager2设置为display:block;，同时pager2开始5秒倒计时（但并非每次倒计时都是5秒，也有可能下一个是6秒倒计时，下下个是10秒倒计时）
然后在点击的情况下，清除当前（就是被设置为display:none;的）DIV的定时器，立即将pager1设置为display:none;，并且pager2设置为display:block;，同时pager2开始5秒倒计时
<div id="pager1">
<button id="next1">下一题</button>
</div>
<div id="pager2" style="display:none;">
<button id="next2">下一题</button>
</div>
<div id="pager3" style="display:none;">
<button id="next3">下一题</button>
</div>
<div id="pager4" style="display:none;">
<button id="next4">下一题</button>
</div>
<div id="pager5" style="display:none;">
<button id="next5">下一题</button>
</div>
<div id="pager6" style="display:none;">
<button id="next6">下一题</button>
</div>
PS.我知道可以用setTimeout来延迟，也知道可以用clearTimeout来清除定时器。
烦请大神指教。