Question

我有两个要素。当我单击左侧元素时，我想将右侧元素更改为另一个元素。如果未再次单击左侧元素，则右侧元素将更改回其原始状态。我已经能够实现这一点，但我希望能够再次单击该元素并设置重新启动的时间间隔。我觉得我很亲近。

         var changeImage = function(){
            if(imageClicked == true){

            var Img = document.getElementById('Img');
            Img.setAttribute('src', "./images/img2.jpg");

           imageTimeout = setTimeout(function(){
           var Image = document.getElementById('Image');
            Image.setAttribute('src', './images/image.jpg');
         }, 3000)


         imageClicked = false;
         return imageTimeout;

     } else {
        imageClicked = true;
        resetTimer();
       }

    }

     var resetTimer = function(){
         clearTimeout(imageTimeout);
         window.setTimeout(imageTimeout, 3000);

   }

    random_image.addEventListener("click", changeImage, false);

Answer 1

问题是你在没有回调函数的情况下调用setTimeout（函数，延迟）。问题在于else块中的这一行：

window.setTimeout(imageTimeout, 3000);

其中imageTimeout不是函数，而是超时的id。

您需要使用超时代码创建一个单独的函数（例如，将其称为timeoutFunction），并在每次调用setTimeout时调用它。

创建该函数后，也可以在if块中调用它，将该行更改为：

imageTimeout = window.setTimeout(timeoutFunction, 3000);

来自您的代码：

function timeoutFunction(){
    var flowerImage = document.getElementById('flowerP');
    flowerImage.setAttribute('src', './images/flowers.jpg');
}

顺便说一句，您可以在该函数外定义flowerImage变量一次，而不是每次都搜索DOM。

Answer 2

为了清除超时，您需要使用window.setTimeout返回的对象的引用来调用clearTimeout函数。因此，您需要将代码更改为：

var resetTimer = function() {
    clearTimeout(timeoutId);
    createjs.Sound.stop(playSoundD);
    timeoutId = window.setTimeout(imagetimeout, 3000);
    console.log("I've been reset");
}

重置间隔的问题

2 个答案: