我的js代碼有什麼可怕的錯誤，任何人都可以幫我調試？

Question

我正在嘗試編寫此工具，以便從一系列日期中爲遊戲地圖製作動畫。流動是這樣的：
第一：選擇遊戲世界
第二：設置地圖顯示參數（時間範圍，地圖類型和動畫速度）
第三：JS代碼抓鬥png文件根據日期並根據動畫速度逐一顯示它們

我遇到的問題是： 如果您只需點擊一個世界，然後單擊動畫，一切都很好，動畫就會正確顯示。然後，如果您選擇另一個世界（不刷新頁面），動畫會閃爍或以某種方式顯示來自其他世界的圖像。我想不出什麼導致這（我在JS我完全的n00b）

$(function(){ 
     $("#image_area").hide(); 
     $("#tw_image").hide(); 
     $('#W40').click(function(){ 
      $("#tw_image").hide();   
      show_image_area('40'); 
     }); 

     $('#W42').click(function(){ 
      $("#tw_image").hide();  
      show_image_area('42'); 
     }); 

     $('#W56').click(function(){ 
      $("#tw_image").hide();  
      show_image_area('56'); 
     });  
    }); 

    function show_image_area(world){ 
     $("#tw_image").hide();  
     if(world == "40" || world == "42" || world == "56"){ 
      $("#map_notice").remove(); 
      $("#image_area").prepend('<div id="map_notice">Map for W'+world+' available from <span id="date_highlight">April 7th 2011</span>, all previous dates invalid and will not have map available</div>'); 
     } 
     $("#date_from").datepicker({ showAnim: 'blind' }); 
     $("#date_to").datepicker({ showAnim: 'blind' }); 
     $('#image_area').show();   
     $("#animate").click(function(){ 
      $("#tw_image").hide();         
      var date_from = $("#date_from").val(); 
      var date_to = $("#date_to").val(); 
      if(!(date_from && date_to)){ 
       alert("From and To dates required.") 
       return false; 
      } 
      var map_type = $("#map_type").val(); 
      var speed = $("#speed").val(); 
      var days = daydiff(parseDate(date_from), parseDate(date_to)); 
      var date_one = new Date(Date.parse(date_from)); 
      var b = date_one.toISOString().split("T")[0].split("-"); 
      var c = get_map_type(map_type) + b[0] + b[1] + b[2]; 
      var width = get_map_type_width(map_type); 
      var img_load = "" + world + "/" + c + ".png"; 
      $('#image_area').load(img_load, function(){ 
       $("#tw_image").attr("width", width); 
       $("#tw_image").attr("src", img_load); 
       $("#tw_image").show(); 
       $("#debug").html("world = "+world); 
      }); 

      var i = 0; 
      var interval = setInterval(
      function(){ 
       date_one.setDate(date_one.getDate() + 1);    
       b = date_one.toISOString().split("T")[0].split("-"); 
       c = get_map_type(map_type) + b[0] + b[1] + b[2];      
       var src_one = "" + world + "/"+c+".png"; 
       var img = new Image(); 
       img.src = src_one; 
       img.onload = function(){ 
        $("#tw_image").attr("src", img.src); 
        $("#debug").html("world = "+world);        
       } 
       i++; 
       if(i >= days) clearInterval(interval);        
      },speed); 

     }); 
    } 

    function get_map_type(map_type){ 
     if(map_type == "topk"){ 
      return "topktribes"; 
     } 
     if(map_type == "toptribe"){ 
      return "toptribes"; 
     } 
     if(map_type == "topnoble"){ 
      return "topnoblers"; 
     } 
    } 

    function get_map_type_width(map_type){ 
     if(map_type == "topk"){ 
      return 1000; 
     } 
     if(map_type == "toptribe"){ 
      return 1300; 
     } 
     if(map_type == "topnoble"){ 
      return 1300; 
     } 
    } 


    function parseDate(str) { 
     var mdy = str.split('/'); 
     return new Date(mdy[2], mdy[0]-1, mdy[1]); 
    } 

    function daydiff(first, second) { 
     return (second-first)/(1000*60*60*24) 
    } 

Answer 1

好吧，我想我有一個解決方案在這裏雖然它不是我認爲這將是。基本上每次您打電話給image_area_world時，您都會在動畫按鈕上創建一個新的點擊處理程序。由於JavaScript範圍的工作原理，World變量在創建時保持與該點擊處理程序相同。

無論如何，要解決這個問題，你可以嘗試一下，就在你定義你的點擊處理程序之前。

$("#animate").unbind("click"); 
$("#animate").click(function() { *code* } 

一些工具可以幫助你。

1. Visual Event
2. Firebug

也有點解釋JavaScript Scope and Closures工作