Question

我正在尝试编写此工具，以便从一系列日期动画游戏地图。流程是这样的：
第一：选择游戏世界
第二：设置地图显示参数（日期范围，地图类型和动画速度）
3rd ：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时，您都会在动画按钮上创建一个 new 点击处理程序。由于JavaScript作用域的工作方式，World变量在创建时对于该单击处理程序保持相同。

无论如何要解决这个问题，你可以尝试在定义点击处理程序之前。

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

一些帮助你的工具。

Visual Event
Firebug

还有点解释JavaScript Scope and Closures如何工作

我的js代码有些可怕的错误，有人可以帮我调试吗？

1 个答案: