相关疑难解决方法(0)

DOM刷新长时间运行的功能

我有一个按钮,当它被点击时会运行一个长时间运行的功能.现在,当函数运行时,我想更改按钮文本,但我在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)

javascript firefox internet-explorer dom

24
推荐指数
3
解决办法
2万
查看次数

jquery html回调

是否有html()函数的回调或检查它已完成的方法.例如:

$("#some_div").html('something here');

if($("#some_div").html() == ''){
//do something here
}
Run Code Online (Sandbox Code Playgroud)

我从帖子中设置元素的html.有时候它没有加载,所以当它没有加载我想它做某事,这是可能的.我现在拥有它的方式总是做另一件事,因为它检查它有html时没有设置html.

html jquery callback

14
推荐指数
2
解决办法
2万
查看次数

为什么我不能在功能开始时更改此按钮的文本?

我有一个按钮.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)

html javascript jquery

2
推荐指数
1
解决办法
77
查看次数

Bootstrap 轮播:幻灯片完成后启动 css 动画

任何人都可以帮助我举例说明如何在轮播项目处于活动状态时启动动画。

我正在使用 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)

css twitter-bootstrap twitter-bootstrap-3

0
推荐指数
1
解决办法
6678
查看次数