js引入时第一次的为啥没加载,你刷新一下他就加载了?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js引入时第一次的为啥没加载,你刷新一下他就加载了?相关的知识,希望对你有一定的参考价值。

<script language="javascript" src="/pweb/js/transfer.js"></script>

这个你的根据你的代码实际情况检查,可能是js代码被延时加载了或者加载顺序问题。也跟你使用的浏览器有关系,如果是代码延时,那你可以吧你都要执行的javascript写在一个setTimeout("",0)就可以解决。具体的解决办法视你的代码情况定。 参考技术A 不知道你用的是什么框架
jquery的话,要把代码放进 $(document).ready(function())
mootools的话 要放进 window.addEvent('domready',function())
什么? 你没有用框架那么:要window.onload
要等页面全部加载完再执行js代码,相信你一点就通。给个好评哦
参考技术B 一定是里面的方法在DOM没有加载完全就执行了
里面不应该包含直接执行的代码,执行交给页面。
参考技术C 1.问题要描述清楚
2.贴代码
参考技术D 你的代码肯定不止这一行,
问题也不是出在这里。

为啥我的函数在每次页面加载时只运行一次?

【中文标题】为啥我的函数在每次页面加载时只运行一次?【英文标题】:Why does my function only run once per page load?为什么我的函数在每次页面加载时只运行一次? 【发布时间】:2012-08-13 01:45:28 【问题描述】:

我正在编写一个脚本,该脚本使用表单中的文本输入进行计算。出于某种原因,我的计算在每次页面加载时只执行一次。当我按下“计算”按钮时,我必须刷新页面才能再次运行该功能。

这是我的按钮的 HTML:

<input type="button" value="Calculate" onclick="calculate(high, low, common);" />
<input type="reset" />
<div id="result"></div> 

这里是计算函数(变量在别处定义):

var calculate = function (high, low, common) 
   if (high.length < 1 || low.length < 1 || common.length <1) 
       document.getElementById('result').innerHTML="Please enter a number for all fields.";
    else 
       if ((high - common) > (common - low)) 
           document.getElementById('result').innerHTML="Result 1.";
         else if ((common - low) > (high - common)) 
        document.getElementById('result').innerHTML="Result 2.";
         else if ((common - low) === (high - common)) 
        document.getElementById('result').innerHTML="Result 3.";
        
      
   ; 

我是否正在做一些事情来阻止函数在每次页面加载时运行多次?

【问题讨论】:

high, low, common 来自哪里? 如果我们更改这三个值的值,代码工作正常。输出正在改变。你能创建一个你的代码的jsfiddle吗? @Abhishek,这是整页的小提琴。由于某种原因,我的程序现在也不会超过第一个 if/else 语句。 jsfiddle.net/vdrwh 【参考方案1】:

您的代码的问题是您只是在第一次加载页面时设置了高、低、常见。 这些值始终保持不变。

您应该在 onclick 事件中传递您的值。

更新了你的 - jsfiddle

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <meta charset = "UTF-8" />
</head>
<body>

<h1>Calculator</h1>

<!--Form forvalue inputs-->

<form>
    <label for="highRi">Highest:</label><input type ="text" id="highRi" />
    <label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
    <label for="comm">Common Point:</label><input type ="text" id="comm" />

<!--Clicking the button should run the calculate() function-->

    <input type="button" value="Calculate" onclick="calculate(document.getElementById('highRi').value, document.getElementById('lowRi').value, document.getElementById('comm').value);" />
    <input type="reset" />

<!--Div will populate with result after calculation is performed-->

    <div id="result"></div> 
</form>

<script type="text/javascript">


var calculate = function (high, low, common) 
   if (high.length < 1 || low.length < 1 || common.length <1) 
       document.getElementById('result').innerHTML="Please enter a number for all fields.";
    else 
       if ((high - common) > (common - low)) 
           document.getElementById('result').innerHTML="Result 1.";
         else if ((common - low) > (high - common)) 
        document.getElementById('result').innerHTML="Result 2.";
         else if ((common - low) === (high - common)) 
        document.getElementById('result').innerHTML="Result 3.";
    


; 

</script>

</body>
</html>

或者您可以在函数调用中简单地获取这些元素值。

<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset = "UTF-8" />
</head>
<body>

<h1>Calculator</h1>

<!--Form forvalue inputs-->

<form>
    <label for="highRi">Highest:</label><input type ="text" id="highRi" />
    <label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
    <label for="comm">Common Point:</label><input type ="text" id="comm" />

<!--Clicking the button should run the calculate() function-->

    <input type="button" value="Calculate" onclick="calculate();" />
    <input type="reset" />

<!--Div will populate with result after calculation is performed-->

    <div id="result"></div> 
</form>

<script type="text/javascript">


var calculate = function () 
    var high = document.getElementById('highRi').value;
    var low = document.getElementById('lowRi').value
    var common = document.getElementById('comm').value
   if (high.length < 1 || low.length < 1 || common.length <1) 
       document.getElementById('result').innerHTML="Please enter a number for all fields.";
    else 
       if ((high - common) > (common - low)) 
           document.getElementById('result').innerHTML="Result 1.";
         else if ((common - low) > (high - common)) 
        document.getElementById('result').innerHTML="Result 2.";
         else if ((common - low) === (high - common)) 
        document.getElementById('result').innerHTML="Result 3.";
    


; 

</script>

​​​ jsfiddleSee it working ​​​ 或许这会对你有所帮助。

【讨论】:

【参考方案2】:

对我来说,如果我更改值 high、low 和 common,你的代码也可以工作,试试这个方法,它可能对你有用

<input type="button" id="button" value="Calculate" />

var button = document.getElementById("button");
var high = document.getElementById("high").value;
var low = document.getElementById("low").value;
var common = document.getElementById("common").value;
button.addEventListener(onclick, calculate(high, low, common));

【讨论】:

以上是关于js引入时第一次的为啥没加载,你刷新一下他就加载了?的主要内容,如果未能解决你的问题,请参考以下文章

js如何在页面滚动到一定位置时触发事件?

在页面加载完成后js获取table的高度不正确,刷新后获取的高度就正确了,求原因及解决方法。

为啥点击模态框的时候为自动生成两个div元素modal-backdrop

js 为啥有时加载有时不加载

为啥使用mui的上拉刷新下拉加载后在电脑上的刷新加载正常手机上就不正常了

如何让js在页面加载后只执行一次,也就是再次刷新当前页,不再执行js