我有一个按钮,当它被点击时会运行一个长时间运行的功能.现在,当函数运行时,我想更改按钮文本,但我在Firefox,IE等浏览器中遇到问题.
HTML:
<button id="mybutt" class="buttonEnabled" onclick="longrunningfunction();"><span id="myspan">do some work</span></button>
Run Code Online (Sandbox Code Playgroud)
JavaScript的:
function longrunningfunction() {
document.getElementById("myspan").innerHTML = "doing some work";
document.getElementById("mybutt").disabled = true;
document.getElementById("mybutt").className = "buttonDisabled";
//long running task here
document.getElementById("myspan").innerHTML = "done";
}
Run Code Online (Sandbox Code Playgroud)
现在这在firefox和IE中都有问题,(在chrome中它可以正常工作)
所以我想把它放到一个settimeout:
function longrunningfunction() {
document.getElementById("myspan").innerHTML = "doing some work";
document.getElementById("mybutt").disabled = true;
document.getElementById("mybutt").className = "buttonDisabled";
setTimeout(function() {
//long running task here
document.getElementById("myspan").innerHTML = "done";
}, 0);
}
Run Code Online (Sandbox Code Playgroud)
但这对firefox也不起作用!按钮被禁用,更改颜色(由于新css的应用)但文本不会更改.
我必须将时间设置为50毫秒而不是仅仅0毫秒,以使其工作(更改按钮文本).现在我至少发现这个愚蠢.我可以理解它是否只能在0ms的延迟下工作,但在较慢的计算机中会发生什么?也许firefox在settimeout需要100ms?听起来很愚蠢.我尝试了很多次,1毫秒,10毫秒,20毫秒......不,它不会刷新它.只有50ms.
所以我遵循了这个主题的建议:
在javascript dom操作之后强制在Internet Explorer中进行DOM刷新
所以我试过了:
function longrunningfunction() {
document.getElementById("myspan").innerHTML = "doing some work";
var a = document.getElementById("mybutt").offsetTop; //force …Run Code Online (Sandbox Code Playgroud) 是否有html()函数的回调或检查它已完成的方法.例如:
$("#some_div").html('something here');
if($("#some_div").html() == ''){
//do something here
}
Run Code Online (Sandbox Code Playgroud)
我从帖子中设置元素的html.有时候它没有加载,所以当它没有加载我想它做某事,这是可能的.我现在拥有它的方式总是做另一件事,因为它检查它有html时没有设置html.
我有一个按钮.onClick按钮触发JS函数.在第一行代码中的这个函数中,我使用jQuery更改了按钮的HTML.然后该功能需要几秒钟.按钮HTML仅在完成功能完成后更改(在浏览器中).
https://jsfiddle.net/wqps1r0k/
代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="btn btn-primary" onclick="setToDisabled(this)">Toggle</button>
<script type="text/javascript">
function setToDisabled(btn) {
//log
console.log('start');
//how to force the browser to show this text immediately?
$(btn).html("TEXT CHANGED ON START OF FUNCTION");
//create a 2 seconds delay
var d1 = new Date();
var t1 = d1.getTime();
var keeprunning = true;
while(keeprunning) {
var d2 = new Date();
var t2 = d2.getTime();
var dif = t2 - t1;
if((dif / 1000) > 2) keeprunning = false;
}
//log
console.log('done');
}
</script> …Run Code Online (Sandbox Code Playgroud)任何人都可以帮助我举例说明如何在轮播项目处于活动状态时启动动画。
我正在使用 daneden.me/animate/? 他的 css 和动画在下一个项目被触发后立即开始。现在我想要的是让它在幻灯片完成后开始。
这是我的 HTML
<div class="item active">
<div class="row" style="position:relative;">
<div class="col-lg-6">
<h1 class="animated fadeInLeft">Bespaar kosten met een overstap naar LED!</h1>
<div class="lead">
<p class="animated fadeInLeft animation-delay-hs">
Met LED verlichting bespaard u al snel <strong>40 tot 60%</strong> op uw energy kosten. <strong>wat LED u?</strong>
</p>
<a href="#" class="animated animation-delay-hs fadeInLeft btn btn-default btn-large">Vraag een offerte op maat aan</a>
<a href="#" class="animated animation-delay-hs fadeInLeft btn btn-warning btn-large">Lees meer</a>
</div>
</div>
<div class="col-lg-6 hero-led" style="position:absolute; bottom:0; right: 0;"> …Run Code Online (Sandbox Code Playgroud)