Fatal编程技术网
  • javascript/
  • 设置超时与javascript中的onclick事件混淆

设置超时与javascript中的onclick事件混淆

javascript jquery html css

设置超时与javascript中的onclick事件混淆,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个自动图像滑块，它也会响应onclick函数，出于某种奇怪的原因，onclick事件几乎没有任何作用，我怀疑它是settimeout的原因，因为javascript是单线程的，但我不精通javascript！有人能告诉我，在过去的两天里，我一直坚持着这个，我做错了什么！谢谢大家! var i=0； var=[]； var时间=3000； var-eventaction=0； var-timeoutId； 启动器图像[0]=”https://i.pinimg.com/236x/f

我正在尝试创建一个自动图像滑块，它也会响应onclick函数，出于某种奇怪的原因，onclick事件几乎没有任何作用，我怀疑它是settimeout的原因，因为javascript是单线程的，但我不精通javascript！有人能告诉我，在过去的两天里，我一直坚持着这个，我做错了什么！谢谢大家!

var i=0；
var=[]；
var时间=3000；
var-eventaction=0；
var-timeoutId；
启动器图像[0]=”https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";
启动器图像[1]=”https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";
启动程序图像[2]=”https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";
var nextbutton=document.querySelector（“#rightbutton”）；
addEventListener（“单击”，右键单击）；
var prevbutton=document.querySelector（“#leftbutton”）；
addEventListener（“单击”，左按钮单击）；
函数rightbutonclick（）
{
eventaction=1；
clearTimeout（timeoutId）；
}
函数leftbuttonclick（）
{
eventaction=2；
clearTimeout（timeoutId）；
}
函数更改img（）{
document.getElementById（'startersliders'）.src=starterimages[i]；
如果（eventaction==1）
{
i++；
如果（i<1.1.1）
{document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；}
其他的
{
i=0；
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
}
}
else if（eventaction==2）
{
我--；
如果（i==-1）
{
i=3；
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
}
其他的
{
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
}
}
else if（eventaction==0）{
如果（i<1.1.1）{
i++；
} 
否则{
i=0；
}
}
//每x秒运行一次函数
timeoutId=setTimeout（“changeImg（）”，time）；
}
//加载页面时运行函数
window.onload=changeImg

#起始滑块{
宽度：10%；
身高：10%；
位置：相对位置；
利润率：0%0%0%0%；
}


上一个

接下来
它将不起作用，因为：


setTimeout("changeImg()", time);



setTimeout(changeImg, time);



setTimeout
的语法无效。要解决此问题，只需执行以下操作：

我将代码复制/粘贴到我的机器中，上面的代码显示为空，因为它们需要位于文档正文底部的脚本标记之间。
当解析器在顶部看到这些内容时，它不知道#rightbutton和#leftbutton是什么，因为它还没有解析body部分中的html，所以返回为null元素

只需将它们移动到html之后的正文部分的底部，并在它们周围放置脚本/脚本标记，看看会发生什么

你需要做以上两件事，马修·赫布斯特说的是正确的，杰克·巴什福德说的是正确的。为setTimeout创建一个变量


var mytimeinverval;
var mytimer;
mytimer=setTimeout(myfunctionname,mytimeinterval);


setTimeout中的函数名没有引号或括号。
如果你加上括号，它可能会立即开火，谁知道呢？
它仍然将myfunctionname识别为不带括号的函数。
根据我的经验，在它周围加引号会使它成为一个字符串。

我不想要信用，他们回答说，只是让你知道两者都要做。
我在Firefox51中实现了所有功能，包括按钮。只需将整个内容粘贴到空白页中，并使用
.htm
或
.html
扩展名保存即可


<!DOCTYPE=HTML><html><meta charset="UTF-8">
<script>

var i = 0;      
var starterimages= [];
var time = 3000;  
var eventaction=0;
var timeoutId;

starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";
starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";
starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";

function rightbuttonclick() {
  eventaction = 1;
  clearTimeout(timeoutId);
  changeImg();
}

function leftbuttonclick() {
  eventaction = 2;
  clearTimeout(timeoutId);
  changeImg();
}

function changeImg() {
  if (eventaction == 1) {
    if (i < starterimages.length - 1) {
      i++;
      document.getElementById('startersliders').src=starterimages[i];  
      eventaction = 0;
    } else { 
      i = 0;
      document.getElementById('startersliders').src=starterimages[i];
      eventaction = 0;
    }
  } else if (eventaction == 2) {
    i--;
    if (i < 0) {
      i = 2;
      document.getElementById('startersliders').src=starterimages[i]; 
      eventaction = 0;
    } else {
      document.getElementById('startersliders').src=starterimages[i];
      eventaction = 0;
    }
  } else {
    if (i < starterimages.length - 1) {
      i++;
    } else {
      i = 0;
    };

    document.getElementById('startersliders').src=starterimages[i];
    eventaction = 0;
  } 

  timeoutId=setTimeout("changeImg()", time);
}
</script>

<style>
#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}
</style>

<body onload="changeImg();">

<button class="button button3" id="leftbutton">previous</button>
<img id="startersliders">
<button class="button button3" id="rightbutton">next</button>

<script>
var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);

var prevbutton=document.querySelector("#leftbutton");
prevbutton.addEventListener("click",leftbuttonclick);
</script>

</body>
</html>




var i=0；
var=[]；
var时间=3000；
var-eventaction=0；
var-timeoutId；
启动器图像[0]=”https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";
启动器图像[1]=”https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";
启动程序图像[2]=”https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";
函数rightbutonclick（）{
eventaction=1；
clearTimeout（timeoutId）；
changeImg（）；
}
函数leftbuttonclick（）{
eventaction=2；
clearTimeout（timeoutId）；
changeImg（）；
}
函数更改img（）{
如果（eventaction==1）{
如果（i<1.1.1）{
i++；
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
}否则{
i=0；
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
}
}else if（eventaction==2）{
我--；
if（i<0）{
i=2；
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
}否则{
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
}
}否则{
如果（i<1.1.1）{
i++；
}否则{
i=0；
};
document.getElementById（'startersliders'）.src=starterimages[i]；
eventaction=0；
} 
timeoutId=setTimeout（“changeImg（）”，time）；
}
#起始滑块{宽度：10%；高度：10%；位置：相对；边距：0%0%0%0%；}
以前的
下一个
var nextbutton=document.querySelector（“#rightbutton”）；
addEventListener（“单击”，右键单击）；
var prevbutton=document.querySelector（“#leftbutton”）；
prevbutton.addEventListener（“单击”，LeftButton单击）；

您好，谢谢您在SO上发布帖子！首先，您使用的是不正确的
clearTimeout
获取调用返回的ID值。因此，您需要执行类似于
var timeoutId。。。timeoutId=setTimeout（“changeImg（）”，time）。。。clearTimeout（timeoutId）
@MatthewHerbst我编辑了代码，正如您所说，仍然无法工作：（@我按照mathew的建议编辑了代码，但仍然不起作用，settime out函数接受带有或不带有偏执的方法，或者只接受没有任何区别的函数名的方法，但仍然进行了尝试，结果sameI测试了4种排列：我测试了4种排列：使用引号和parens correc

<!DOCTYPE=HTML><html><meta charset="UTF-8">
<script>

var i = 0;      
var starterimages= [];
var time = 3000;  
var eventaction=0;
var timeoutId;

starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";
starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";
starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";

function rightbuttonclick() {
  eventaction = 1;
  clearTimeout(timeoutId);
  changeImg();
}

function leftbuttonclick() {
  eventaction = 2;
  clearTimeout(timeoutId);
  changeImg();
}

function changeImg() {
  if (eventaction == 1) {
    if (i < starterimages.length - 1) {
      i++;
      document.getElementById('startersliders').src=starterimages[i];  
      eventaction = 0;
    } else { 
      i = 0;
      document.getElementById('startersliders').src=starterimages[i];
      eventaction = 0;
    }
  } else if (eventaction == 2) {
    i--;
    if (i < 0) {
      i = 2;
      document.getElementById('startersliders').src=starterimages[i]; 
      eventaction = 0;
    } else {
      document.getElementById('startersliders').src=starterimages[i];
      eventaction = 0;
    }
  } else {
    if (i < starterimages.length - 1) {
      i++;
    } else {
      i = 0;
    };

    document.getElementById('startersliders').src=starterimages[i];
    eventaction = 0;
  } 

  timeoutId=setTimeout("changeImg()", time);
}
</script>

<style>
#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}
</style>

<body onload="changeImg();">

<button class="button button3" id="leftbutton">previous</button>
<img id="startersliders">
<button class="button button3" id="rightbutton">next</button>

<script>
var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);

var prevbutton=document.querySelector("#leftbutton");
prevbutton.addEventListener("click",leftbuttonclick);
</script>

</body>
</html>