暂停功能“onClick”

Posted 2023-02-19

【中文标题】暂停功能“onClick”

【英文标题】：Pausing a function "onClick"

【发布时间】：2017-01-08 18:15:28

【问题描述】：

我目前正在制作带有 5 个按钮（开始、停止、暂停、后退、前进）的图像幻灯片 我的开始按钮加载了一个自动运行功能，该功能开始播放图像，而后退/前进按钮跳过/返回一个图像。我想知道单击暂停按钮时如何暂停自动运行功能？再次点击时不需要恢复，只需要在它所在的当前图像上暂停即可。停止功能（一旦我完成它）将结束功能并返回开始。干杯

html：

  <button onClick="autoRun()">Start</button>
  <button onClick="changeImage(-1); return false;">Previous Image</button>
  <button onClick="pause();">pause</button>
  <button onClick="changeImage(1); return false;">Next Image</button>
  <button onClick="stop();">Stop</button>



  </td>

javascript：

var images = ["HGal0.jpg", "HGal1.jpg", "HGal2.jpg", "HGal3.jpg", "HGal4.jpg", "HGal5.jpg", "HGal6.jpg", "HGal7.jpg", "HGal8.jpg", "HGal9.jpg", "HGal10.jpg", "HGal11.jpg", "HGal12.jpg", "HGal13.jpg", "HGal14.jpg", "HGal15.jpg"];

var imageNumber = 0;
var imageLength = images.length - 1;

function changeImage(x) 
imageNumber += x;
// if array has reached end, starts over
if (imageNumber > imageLength) 
    imageNumber = 0;

if (imageNumber < 0) 
    imageNumber = imageLength;


document.getElementById("slideshow").src = images[imageNumber];

return false;


function autoRun() 
setInterval("changeImage(1)", 2000);

【问题讨论】：

你读过doco for setInterval()吗？

和clearInterval()

调用Start()的函数应该叫autoRun()，不是吗？

是的@jordaniac89 我刚刚在发布时修复了它，谢谢

【参考方案1】：

在变量中设置间隔：

var interval = setInterval("changeImage(1)", 2000);

并用 clearInterval() 清除它：

function pause()
  clearInterval(interval);

【讨论】：

这似乎在正确的轨道上，我对 js 还是很陌生，尤其是间隔。暂停功能现在正在工作，但是一旦我点击“开始”按钮，它就会继续循环（它应该这样做）但暂停按钮将不再工作，所以它似乎只工作一次。它现在也在加载时运行自动运行，而不是等到我按下开始。