jQuery - 没有正确迭代? (执行时间太长)

时间:2016-05-12 21:17:16

标签: javascript jquery

我有一个片段,我已经开发了增加图像的大小并将td放在图像的右侧并将其放在下面。

但是 - 它需要花费几秒钟的时间,从删除TD到添加它所需的时间,它会使页面渲染/绘制/流程看起来很糟糕。

请参阅下面的视频,以便更好地了解正在发生的事情。

http://screencast.com/t/RQdBiNyGkEm

另请参阅下面的代码段;

<script>
  $(document).ready(function() {
    $('html').addClass('js');
    $('.description').show();
    // add a td for initial page load of cart.
    $("table#shopping-cart-items tr td.image").after($('<td id="clearSpacePageLoad"></td>'));
    // take content from right - and drop it beneath the image

    $('#shopping-cart-items > tbody > tr').each(function() {
      var desc = $('td.description', this).html()
      $('td.description', this).remove();
      $('td.image', this).append(desc);
    });
  }); 
  </script>
  
  <script>

  //When selecting a delivery method - everything resets due to AJAX.

$(document).ready(function() {
  // Use .live() in stead of .on() since jQuery is < 1.9
  // On select of delivery method do the following
  $('.shippingOpt').live('click', function() {
    // Wait for ALL ajax requests on page (Past and future) to execute BEFORE executing the following
    $(document).ajaxStop(function() {
      // Repeat the same code as initial page load.
      $('img.item-img').each(function() {
        var str = $(this).attr('src'),
          arr = str.split("?");
        query = "?hei=200&wid=200&op_sharpen=1"
        $(this).attr('src', arr[0] + query);
      });

      $('#shopping-cart-items > tbody > tr').each(function() {
        var desc = $('td.description', this).html()
        $('td.image', this).append(desc);
        $('td.description', this).remove();
      });


      // If ID of 'clearSpaceOnClick' exists don't add another td, if it doesn't - add it!
      if ($('#clearSpaceOnClick').length) {} else {
        $("table#shopping-cart-items tr td.image").after($('<td id="clearSpaceOnClick"></td>'));
      }
    });
  });
}); 
</script>
<style>
  .checkoutBasket table.cart-container td.image img {
    width: 200px;
    height: auto;
  }
  #clearSpace {
    padding: 0 0 0 15px;
  }
</style>

2 个答案:

答案 0 :(得分:0)

通过观看视频,您几乎肯定会注入一个额外的td元素,现在行上的$("table#shopping-cart-items tr td.image").after($('<td id="clearSpaceOnClick"></td>'));比表中的列多。{1}}。如果检查元素,您应该能够看到问题。

关闭,我会仔细查看与下面这一行相关的逻辑,但是你不给我们你的HTML,所以我们无法确定:

import random import math import time import sys def hangman(): if guess == 5: print " ----------|\n /\n|\n|\n|\n|\n|\n|\n______________" print print "Strike one, the tigers are getting lonely!" time.sleep(.5) print "You have guessed the letters- ", guessedLetters print " ".join(blanks) print elif guess == 4: print " ----------|\n / O\n|\n|\n|\n|\n|\n|\n______________" print print "Strike two, pressure getting to you?" time.sleep(.5) print "You have guessed the letters- ", guessedLetters print " ".join(blanks) print elif guess == 3: print " ----------|\n / O\n| \_|_/ \n|\n|\n|\n|\n|\n______________" print print "Strike three, are you even trying?" time.sleep(.5) print "You have guessed the letters- ", guessedLetters print " ".join(blanks) print elif guess == 2: print " ----------|\n / O\n| \_|_/ \n| |\n|\n|\n|\n|\n______________" print print "Strike four, might aswell giveup, your already half way to your doom. Oh wait, you can't give up." time.sleep(.5) print "You have guessed the letters- ", guessedLetters print " ".join(blanks) print elif guess == 1: print " ----------|\n / O\n| \_|_/ \n| |\n| / \\ \n|\n|\n|\n______________" print print "One more shot and your done for, though I knew this would happen from the start" time.sleep(.5) print "You have guessed the letters- ", guessedLetters print " ".join(blanks) print elif guess == 0: print " ----------|\n / O\n| \_|_/ \n| |\n| / \\ \n| GAME OVER!\n|\n|\n______________" print "haha, its funny cause you lost." print "p.s the word was", choice print words = ["BAD","RUGBY","JUXTAPOSED","TOUGH","HYDROPNEUMATICS"] choice = random.choice(words) lenWord = len(choice) guess = 6 guessedLetters = [] blanks = [] loading = ".........." print "Loading", for char in loading: time.sleep(.5) sys.stdout.write(char) sys.stdout.flush() time.sleep(.5) print "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" print "Great I'm glad to see you have finally woken." time.sleep(1) raw_input("Did you have a nice journey? ") time.sleep(2) print """ Oh wait, I don't care. I have brought you to this island simply for my amusment. I also get paid to do this. """ time.sleep(2) print""" Don't worry this isn't all for nothing. I'm sure the tigers will enjoy your company. """ time.sleep(2) print""" Hold on, let us make things interesting. """ time.sleep(2) print "I will let you live if you complete an impossible game!" time.sleep(2) print "A game know as hangman!" time.sleep(2) print "HAHAHAHAHAH, I am so evil, you will never escape!" time.sleep(2) print "Enjoy your stay :)" time.sleep(1) print print "Alright lets begin! If you wish to guess the word type an '!' and you will be prompted" time.sleep(.5) print for s in choice: missing = choice.replace(choice, "_") blanks.append("_") print missing, print time.sleep(.5) while guess > 0: letterGuess = raw_input("Please enter a letter: ") letterGuess = letterGuess.upper() if letterGuess == "!": print "If you guess the FULL word correcly then you win, if incorrect you die. Simple." fullWordGuess = raw_input("What is the FULL Word? ") fullWordGuess = fullWordGuess.upper() if fullWordGuess == choice: print "You must have hacked this game" time.sleep(.5) print "Looks like you beat an impossible game! \nGood Job \nI'll show myself out." break else: print "You lost, I won, you're dead :) Have a nice day!" print "P.S The word was ", choice break else: print if letterGuess in choice: location = choice.find(letterGuess) blanks.insert(location, letterGuess) del blanks[location+1] print " ".join(blanks) guessedLetters.append(letterGuess) print print "You have guessed the letters- ", guessedLetters if "_" not in blanks: print "Looks like you beat an impossible game! \nGood Job \nI'll show myself out." break else: continue else: guessedLetters.append(letterGuess) guess -= 1 hangman()

答案 1 :(得分:0)

如果td.image中有多个table#shopping-cart-items,则您不应附加带有ID的元素(因为ID必须是唯一的),您在2个地方执行此操作在你的代码中。

看起来您可能正在选择(已经有效)送货选项。在这种情况下,如果有任何未完成的ajax请求,ajaxstop可能会延迟。

此外,jQuery .on自v1.7开始提供,而不是1.9