单击时暂停Javascript几秒钟_Javascript_Html_Settimeout_Setinterval

单击时暂停Javascript几秒钟

javascript html

单击时暂停Javascript几秒钟,javascript,html,settimeout,setinterval,Javascript,Html,Settimeout,Setinterval,好的，我知道这是之前讨论过的一个话题，但考虑到我是新手，还在学习javascript，我发现所有的答案都有点复杂我在html的头部分有以下代码 <script> function timedText() { setTimeout(function(){displayResult()},3000); setTimeout(function(){displayResult1()},7000); setTimeout(function(){displayResul

好的，我知道这是之前讨论过的一个话题，但考虑到我是新手，还在学习javascript，我发现所有的答案都有点复杂

我在html的头部分有以下代码

<script>
function timedText() {
    setTimeout(function(){displayResult()},3000);
    setTimeout(function(){displayResult1()},7000);
    setTimeout(function(){displayResult2()},15000);
    setTimeout(function(){timedText()},18000);
}
</script>

<script>
function change() {
    setTimeout(function(){timedText()},1000);
}   
</script>

<script>
function displayResult() {
    document.getElementById("adimg_holder").style.bottom="0px";
    document.getElementById("button1").style.backgroundPosition="bottom";
    document.getElementById("button2").style.backgroundPosition="top";
    document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult1() {
    document.getElementById("adimg_holder").style.bottom="370px";
    document.getElementById("button1").style.backgroundPosition="top";
    document.getElementById("button2").style.backgroundPosition="bottom";
    document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult2() {
    document.getElementById("adimg_holder").style.bottom="739px";
    document.getElementById("button1").style.backgroundPosition="top";
    document.getElementById("button2").style.backgroundPosition="top";
    document.getElementById("button3").style.backgroundPosition="bottom";
}
</script>


函数timedText（）{
setTimeout（函数（）{displayResult（）}，3000）；
setTimeout（函数（）{displayResult1（）}，7000）；
setTimeout（函数（）{displayResult2（）}，15000）；
setTimeout（函数（）{timedText（）}，18000）；
}
函数更改（）{
setTimeout（函数（）{timedText（）}，1000）；
}   
函数displayResult（）{
document.getElementById（“adimg_holder”）.style.bottom=“0px”；
document.getElementById（“button1”）.style.backgroundPosition=“bottom”；
document.getElementById（“button2”）.style.backgroundPosition=“top”；
document.getElementById（“button3”）.style.backgroundPosition=“top”；
}
函数displayResult1（）{
document.getElementById（“adimg_holder”）.style.bottom=“370px”；
document.getElementById（“button1”）.style.backgroundPosition=“top”；
document.getElementById（“button2”）.style.backgroundPosition=“bottom”；
document.getElementById（“button3”）.style.backgroundPosition=“top”；
}
函数displayResult2（）{
document.getElementById（“adimg_holder”）.style.bottom=“739px”；
document.getElementById（“button1”）.style.backgroundPosition=“top”；
document.getElementById（“button2”）.style.backgroundPosition=“top”；
document.getElementById（“button3”）.style.backgroundPosition=“bottom”；
}

和下面的html

    <body onload="change()">
    <div class="banner_area">
    <div class="banner_wrapper">
        <img src="images/image_holder.png" />
        <div id="ad_holder">
            <div id="adimg_holder">
            <img class="ad_images" src="images/recruitment_banners.png" />
            <img class="ad_images" src="images/training_banners.png" />
            <img class="ad_images" src="images/staffing_banner.png" />
            </div>
        </div>
        <div id="ad_buttons">
        <div id="button1" style="background-image:url(images/buttonfirst.png);background-position:bottom;width:259px;height:41px" onclick="displayResult()"></div>
        <div id="button2" style="background-image:url(images/buttonsecond.png);width:259px;height:41px" onclick="displayResult1()"></div>
        <div id="button3" style="background-image:url(images/buttonthird.png);width:259px;height:41px" onclick="displayResult2()"></div>
    </div>
    </div>
    </div>

因此，按钮切换不同的位置，脚本以时间间隔在位置之间循环

现在，我试图实现的是，当位置被循环通过时，如果我点击其中一个按钮，它会跳到相关的位置，并保持这种方式一段时间（比如说几秒钟），然后继续循环

希望我的动机易于理解。

您可以使用setTimeout timing函数本身

将函数编写为：

function calldesiredFunctionafterPause (functionTobeCalled){

   setTimeout(function(){functionTobeCalled,1000}) //increase the millisec as needed
}

在onClick上调用此函数并将函数名作为参数传递

这将使onclick函数延迟所需的时间

以下是实现此行为的方法：

下面是JavaScript：

function timedText() {
  setTimeout(function() {
    displayResult();
  },2000);
  setTimeout(function() {
    displayResult1();
  },6000);
  setTimeout(function() {
    displayResult2();
  },14000);
  setTimeout(function() {
    timedText();
  },15000);
}

(function change() {
  setTimeout(function() {
    timedText();
  },1000);
}());

var locked = false;

function button1Handler() {
  moveTop();
  lockFor(3);
}

function button2Handler() {
  moveBottom();
  lockFor(3);
}

function lockFor(seconds) {
  locked = true;
  setTimeout(function () {
    locked = false;
  }, seconds * 1000);
}

function displayResult() {
  if (locked) return;
  moveTop();
}

function moveTop() {
  document.getElementById("adimg_holder").style.bottom="0px";
  document.getElementById("button1").style.backgroundPosition="bottom";
  document.getElementById("button2").style.backgroundPosition="top";
  document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult1() {
  if (locked) return;
  moveMiddle();
}

function moveMiddle() {
  document.getElementById("adimg_holder").style.bottom="370px";
  document.getElementById("button1").style.backgroundPosition="top";
  document.getElementById("button2").style.backgroundPosition="bottom";
  document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult2() {
  if (locked) return;
  moveBottom();
}

function moveBottom() {
  document.getElementById("adimg_holder").style.bottom="739px";
  document.getElementById("button1").style.backgroundPosition="top";
  document.getElementById("button2").style.backgroundPosition="top";
  document.getElementById("button3").style.backgroundPosition="bottom";
}

上述函数分别是

button1

和

button2

的单击处理程序

我还将

change

函数更改为бe iLife（立即调用的函数表达式），但这不是必需的，您不必这样做，因为您希望被调用

onload

您不需要太多的代码：只需创建一个displayResult函数，它将反复调用自己：

var scrollParam = {        scrollPos : 0,         // current pos
                           scrollIncr : 370,      // incr in px each call
                           loopScrollAfter : 700  // set scrollPos to >0 if above that number
                           delay : 3000,          // std scroll delay 
                           whichIsOnTop : 0,      // index of the topmost item (button)
                           pauseDelay : 1000,     // added delay if someone clicks
                           pauseRequired : 0 };   // current required click delay

var mainItem = document.getElementById("adimg_holder");

function displayResult()
 {
   mainItem.style.bottom=scrollParam.scrollPos +"px";
   scrollParam.scrollPos += scrollParam.scrollIncr;
   if (scrollParam.scrollPos>scrollParam.loopScrollAfter) scrollParam.scrollPos=0;

   setBackgroundPosition("button1",0);
   setBackgroundPosition("button2",1);
   setBackgroundPosition("button3",2);
   scrollParam.whichIsOnTop = (scrollParam.whichIsOnTop + 1) % 3;

   // now setup the next call, taking into account if a pause is required
   var requiredDelay = scrollParam.delay;
   if (scrollParam.pauseRequired >0) { 
            requiredDelay += scrollParam.pauseRequired;  
            scrollParam.pauseRequired=0;
           }
   setTimeout(displayResult, requiredDelay);
 }

 var setBackgroundPosition(itemName, index ) {             
    document.getElementById(itemName).style.backgroundPosition=topOrBottom(index ); 
  };

 // returns "top" for the right index (==scrollParam.whichIsOnTop) and "bottom" for the others
 var topOrBottom(thisIndex) { return (thisIndex == scrollParam.whichIsOnTop) ? "top" : "bottom"; };

 // in the button click handler you should use :
 scrollParam.pauseRequired += scrollParam.pauseDelay;

 // to launch the scroll, just call :
 displayResult();                        // in the loaded() event handler for example.

Rq：如果您愿意，您可以轻松地更改参数以获得更平滑的滚动。

我在代码中犯了一个错误…请更正它，因为setTimeout（function（）{functionTobeCalled（）；}，1000）在JSFIDLE中似乎不起作用。。它会在单击按钮后作出lil反应。它会在您单击绿色或蓝色块后的第二秒作出反应。我已经用一个更改进的版本更新了我的答案…我也会更新小提琴…如果有一天它加载了…最后JSFIDLE加载了…我已经更新了小提琴。但是，当您单击绿色或蓝色的div（按钮）时，1秒后图像将被移动。当然，

change

方法仍在每18000毫秒运行一次，因此当

change

调用任何方法时，图像可以随时移动。非常感谢您费心研究我的问题。问题是我希望位置在点击后立即改变，然后保持这种状态一段时间（比如3-5秒），然后继续自动切换你希望它被锁定（不移动）直到按钮被点击，或者在按钮被点击后仅仅阻塞3-5秒？Thanx用于与脚本混合，但正如问题中所提到的，我是javascript新手，打算学习更多。你的脚本看起来很专业，但我还是很难理解它执行时会发生什么。这就是我要求更简单脚本的原因。基本上我是慢慢来的，只要我通过这个过程学习。但是一吨多。。。