Javascript 代码执行延迟

Question

我在点击事件中调用了下面的函数。基本上这段代码需要一些时间（大约 200 毫秒）才能在浏览器上执行，因为我在 jquery 树上触发了点击事件。

function showAsset()
{
      $(".err").html("Please wait . . .")
      $(".err").css('display','block')
      $(".err").css('background','orange')
      v=$("#asset_details").val()
      v=v.split("###")
      v1=v[0].split("-")
//Upto this block should be executed first

      //Jquery Tree block starts
      $("#navigation ."+v1+" div").click()
      $("#navigation ."+v[1]+" div").click()
      $("#navigation table tr:contains('"+v[0]+"')").css({'background':'#FFF82A'})
       $('html, body').animate({
        'scrollTop' :( $("#navigation table tr:contains('"+v[0]+"')").position().top-5)
    });
       //Jquery Tree block ends
}

因此，为了向我的用户介绍此加载，我在函数调用开始时显示了 "please wait . . ." 消息。但是这条消息是在完全执行函数调用后显示的。

我的问题是为什么当我调用这个函数时块的开始也会延迟。我将 Jquery 树块放在函数的底部。但是整体代码是同时执行的。

有没有办法把这个执行分开

Answer 1

您可以使用setTimeout来分隔您的执行。

Calls a function or executes a code snippet after a specified delay.

source

没有 setTimeout 的第一个块被执行，setTimeout 之后在单独的范围内执行。

function showAsset() {
  $(".err").html("Please wait . . .")
  $(".err").css('display', 'block')
  $(".err").css('background', 'orange')
  v = $("#asset_details").val()
  v = v.split("###")
  v1 = v[0].split("-")
    //Upto this block should be executed first

  //Jquery Tree block starts

  setTimeout(function() {
    $("#navigation ." + v1 + " div").click()
    $("#navigation ." + v[1] + " div").click()
    $("#navigation table tr:contains('" + v[0] + "')").css({
      'background': '#FFF82A'
    })
    $('html, body').animate({
      'scrollTop': ($("#navigation table tr:contains('" + v[0] + "')").position().top - 5)
    });
    //Jquery Tree block ends
  }, 0);
}

Javascript 代码执行延迟

Javascript code execution delayed

javascript

treeview

jquery