javascript 函数完成后重新加载页面

Question

我有一个简单的 javascript 程序可以运行图像的 onclick。

但是，每当我点击图片时，页面都会重新加载。

经过大量调试后，我发现页面在脚本完成之前不会重新加载。

代码中有几个 setTimeout，但我注意到页面立即重新加载。我什至将这些超时更改为 15000 毫秒，但它仍然会立即重新加载。

我正在使用 jquery，如果有任何不同的话。

我还希望每次单击程序时都能得到不同的结果，这样每次单击时都会运行不同的脚本，并且某些文本会按特定顺序更改。我通过将每个脚本中图像的 onclick 属性更改为下一个脚本的名称来做到这一点，这样脚本一就会将 onclick 切换到脚本二，依此类推。我在这些开关上设置了一个超时时间，这样一次点击就不会跑遍每个脚本。脚本二不是运行，所以很有效。

我的代码：

function getSounds() {
    console.log("script. initiated");
    $("#soundwebGetSoundDirections").html("Now, Wait until the file is done downloading and click below again.");
    console.log("new message");
    $("#soundwebGetSoundA").attr('href',"");
    console.log("href eliminated");
    setTimeout($("#soundwebGetSoundImg").attr('onclick','findFile()'),2000); 
    console.log("onclick to findFile()");

}

function findFile(){
    console.log("FINDFILE")
    $("#soundwebGetSoundDirections").html("Find the file(it's probably in your downloads), copy the path of the file (usually at the top of the file explorer) and paste in it the box below.  Then, make sure there is a '/' at the end of the path and type 'Linkiness.txt' (case sensitive, without quotes) at the end.  Once you have all that stuff typed, click the icon again.");
    console.log("FIND IT, DARN IT!!");
    $("#soundwebGetSoundPathInput").css("opacity",1);
    console.log("diving into reader");
    setTimeout($("#soundwebGetSoundImg").attr('onclick','readFile()'),1000); 
}
function readFile(){
    console.log("loading...");
    $("#soundwebGetSoundDirections").html("loading...");
    if(document.getElementById("soundwebGetSoundPathInput").value.length == 0){
        setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
        setTimeout(findFile(),2000);
    }

}

和链接到的 HTML，

<a id = "soundwebGetSoundA" href = "https://docs.google.com/feeds/download/documents/export/Export?id=1ynhHZihlL241FNZEar6ibzEdhHcWJ1qXKaxMUKM-DpE&exportFormat=txt">
                    <img onclick = "getSounds();" class = "soundwebImgResize" src = "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/music-note-sound-circle-512.png" id = "soundwebGetSoundImg"/>
                </a>

感谢您的帮助，卢卡斯 N.

Answer 1

您没有正确使用 setTimeout。你应该传递一个函数而不是一个语句。因此，例如，而不是

setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);

你应该使用

setTimeout(function () { $("#soundwebGetSoundDirections").html("Please fill in Path!") },1000);
setTimeout(findFile,2000);

我认为设置 onclick 属性也是如此，但我从未尝试过像那样动态更改 onclick 属性。

由于您已经在使用 jQuery，如果您当前的设置不起作用，您可以尝试使用 .on('click'... 和 .off('click'...。

Answer 2

如果您不想点击图片导致锚标签加载 href，则将图片标签移到锚标签之外。

javascript 函数完成后重新加载页面

javascript function reloads page upon completion

html

javascript

jquery

reload