Question

我为我正在创建的网站编写了这个Javascript，我不确定为什么代码会自动运行，我的解决方案之一是编写一个函数/创建一个计时器，以便代码在我想要的时候运行。

这是js：

var introCap = document.getElementById("captionCol");
var imgDiv = document.getElementById("imgCol");
var introDiv = document.getElementById("intro");
var expose = document.getElementById("gotoPage");
var fade = 1;
var l = 15;
var r = 45;

//expose.onclick = move; this is commented out for the time being.

function stop() {
    clearInterval(moveInt);
    clearInterval(fadeInt);
    }

function fadeOut() {
   fade -= 0.07;

   introDiv.style.opacity = fade;
   introDiv.style.filter = "alpha('"+fade+"')";
   if(introDiv.style.opacity<0) {
        stop();
       }
    }
    var fadeInt = setInterval("fadeOut()", 60);

function move() {
    l -= 0.1;
    r +=  0.1;

    introCap.style.left = r+"%";
    imgDiv.style.left = l+"%";

    if (imgDiv.style.left<10) {
    fadeOut();
    }
   }
   var moveInt = setInterval("move()", 70);

这里是相应的html：

<div id="intro">

        <div id="imgCol"></div>

        <div id="captionCol">
            <p> Hi, I'm <b>Jenny Spring</b>. <br><br>
            I'm a <span id="emp">SPIN</span> farmer. </p>
    </div>

    <p><a href="#" id="gotoPage">Go To</a></p> <!-- this link will be changed to a button later but is being used as is temporarily.

</div>

是否有人能够告诉代码为何会自动执行？

谢谢！

Answer 1

setInterval()不仅设置间隔，还在每个间隔后调用该函数。所以在准备好调用之前不要使用此功能。另一个函数setTimeout()可用，它只执行一次函数。

例如，您可以将间隔调用移动到函数start()并使用href作为开始按钮

function start() {
    var moveInt = setInterval("move()", 70);
    var fadeInt = setInterval("fadeOut()", 60);
}

<p><a href="javascript:start();" id="gotoPage">Go To</a></p>

来源：http://www.w3schools.com/js/js_timing.asp

使用Javascript代码控制丢失

1 个答案: