Question

我希望有人可以帮助我了解我要去哪里，我有一些基本的JavaScript；当用户单击按钮时，将div的内部HTML替换为加载Gif，而其余函数计算最终值，然后将gif替换为最终值。但是实际发生的是整个过程在进行任何更改之前就已完成，因此将设置加载gif，并在最后立即将其替换为最终值。它在Firefox中可以正常工作，但在chrome或IE中则不能。我需要立即设置加载giff，以便用户可以看到该值正在计算中，因为这可能需要一些时间。

const loadingGif = "path to giff";

$('#btn1').click(function() { 
        buttonClick()
});


function buttonClick(){
    setLoadingGiff("buttonValue")
};

async function setLoadingGiff(range){
$('#divID').html(loadingGif);
var result = await calcFunction(range);
}

function calcFunction(){

//Do calculations ....
//finally
const finalCalulcation = "value";
$('#divID').html(finalCalulcation);

}

Answer 1

就像其他人所建议的那样，仅使用伪装，就像我在这段通用代码中所描述的那样：

$("button").click(()=>{ 
   $(".loading").show(300);
   calcFunc(); 
});

var calcFunc = () => {
  //Do something
  //Do something
  //Do something
  //Do something
  .
  .

  setTimeout(()=> {
    $(".loading").hide(300); 
    //show result
    }, 300);
}

为什么我的等待功能立即完成？

1 个答案: