<加载gif图像>执行语句&gt;隐藏gif

时间:2013-08-20 16:36:05

标签: javascript jquery dom

这个序列有问题吗?

//loading_image is hidden at first
$('#run_only').click(function(e) {
  $('#loading_image').show();
  var def_main = false,
      def_header = false,
      def_iostream = false,
      def_conio = false,
      def_stdio = false,
      def_math = false,
      def_string = false;

  //REMOVE PREVIOUSLY ADDED CLASSESS TO LN
  $('#board_ln').contents().removeClass('line-error');
  if(er_syntax_pre) {
    var error_text = '<p>Syntax Error. Detected brace matching error.</p>';
    var debugging_text = '<p>DEBUGGING: Check the proper pairing of ( ), { }, [ ], \' \', " " </p>';

    mb_error(error_text, debugging_text);
  } else {
    mb_noerror('');//transfer this at the end part later
    var inlineDiv_num = $('#board_code > div ').size(),
        kword_search_raw="",
        kword_search="",
        kwordSyntaxSearch_tilde="",
        kwordSyntaxSearch="",
        noKeyword = true
    er_text = new Array(),
    er_ln = new Array(),
    er_debug_text = new Array();

    er_text = [];
    er_ln = []; 
    er_debug_text = [];

    for( var x=0; x<inlineDiv_num; x++ ) {
      var inlineDiv_num_textL = $('#board_code > div ').eq(x).text().length,
          inlineDiv_num_text = $('#board_code > div ').eq(x).text();

      for( var y=0; y<inlineDiv_num_textL; y++) {
        //kword_search = kword_search + inlineDiv_num_text.charAt(y); 
        kword_search_raw = kword_search_raw + inlineDiv_num_text.charAt(y);
        kword_search = kword_search + inlineDiv_num_text.charAt(y); 

        //SEARCH FOR STRINGS AND REPLACE THEM
        if(/(?:'[^']+'|"[^"]+")$/.test(kword_search)) {
          //alert('found 2nd occurence of quote');
          kword_search = kword_search.replace(/(?:'[^']+'|"[^"]+")$/, "!string!");
        }
        //alert(kword_search);
        //include***********
        if(/\s*\#include$/.test(kword_search) ) {
          noKeyword = false;
          //alert('at the tail of #include');

          var kwordSyntaxSearch = sliceToEndString(x,y);

          //alert('kwordSyntaxSearch: '+kwordSyntaxSearch);

          //SYNTAX CHECKER
          if( /^\s*<\s*iostream\.h\s*>*/.test(kwordSyntaxSearch) ) {
            def_iostream = true;
            var charLast = kwordSyntaxSearch.indexOf(">");
            kwordSyntaxSearch_tilde = kwordSyntaxSearch.splice(charLast+1, 0, "~~");
          } else if( /^\s*<\s*conio\.h\s*>*/.test(kwordSyntaxSearch) ) {
            def_conio = true;
            var charLast = kwordSyntaxSearch.indexOf(">");
            kwordSyntaxSearch_tilde = kwordSyntaxSearch.splice(charLast+1, 0, "~~");
          } else if( /^\s*<\s*stdio\.h\s*>*/.test(kwordSyntaxSearch) ) {
            def_stdio = true;
            var charLast = kwordSyntaxSearch.indexOf(">");
            kwordSyntaxSearch_tilde = kwordSyntaxSearch.splice(charLast+1, 0, "~~");
          } else if( /^\s*<\s*string\.h\s*>*/.test(kwordSyntaxSearch) ) {
            def_string = true;
            var charLast = kwordSyntaxSearch.indexOf(">");
            kwordSyntaxSearch_tilde = kwordSyntaxSearch.splice(charLast+1, 0, "~~");
          } else if( /^\s*<\s*math\.h\s*>*/.test(kwordSyntaxSearch) ) {
            def_math = true;
            var charLast = kwordSyntaxSearch.indexOf(">");
            kwordSyntaxSearch_tilde = kwordSyntaxSearch.splice(charLast+1, 0, "~~");
          } else {
            //alert('#include syntax error');
            er_text.push('Error: Syntax | Runtime. #include<headerfile.h>');
            er_debug_text.push('Debugging: (1)Check text after "#include" (2)Check "support" for supported libraries');
            er_ln.push(x);
            y=inlineDiv_num_textL;
            x=inlineDiv_num;
          }//else
        }//IF FOUND #INCLUDE|
      }//for y
    }//for x
    //NO KEYWORDS AT ALL
    if(noKeyword){
      er_text[0] = "Error: No keywords detected";
      er_debug_text[0] = "Debugging: Make sure that you are using the supported C++ keywords of this system";
      er_ln[0] = inlineDiv_num-1;
      mb_error(er_text[0], er_debug_text[0], er_ln[0]); 
    }
    if(er_ln.length > 0) {
      mb_error(er_text[0], er_debug_text[0], er_ln[0]);
    }
  }//else no brace error        

  $('#loading_image').hide();
});

此代码未显示gif图像。我尝试删除$('#loading_image')。hide();我发现图像加载发生在“长代码处理”之后

2 个答案:

答案 0 :(得分:2)

虽然我没有测试过,但我的猜测是show()函数使用了setTimeout函数。即使超时设置为0毫秒,这也将改变语句的顺序。使用show的callback-option确保在显示图像后完成长代码处理:

$('#run_only').click(function(e) {
    $('#loading_image').show(0, function(){

        //long code processing

        $('#loading_image').hide();
    });
});

答案 1 :(得分:1)

这可能是异步编程的一个方面,很难推理。考虑这个例子:

$('#run_only').click(function(e) {
    $('#loading_image').show();

    $.getJSON('/something.json?wait=3seconds', function() {
      //This code will take about 3 seconds to execute
    });

    //This code will execute as soon as the $.get is fired (before it has returned)
     $('#loading_image').hide();
});

要解决此问题,请尝试以下方法:

$('#run_only').click(function(e) {
    $('#loading_image').show();

    $.getJSON('/something.json?wait=3seconds', function() {
      //This code will take about 3 seconds to execute
     //But this will only execute after the $.getJSON() is sucessful
     $('#loading_image').hide();
    });
});