当再次调用相同的函数时退出javascript函数

时间:2015-10-16 11:44:06

标签: javascript jquery

在我的网站中,我首先调用一个javascript函数,使用户可以更改我网站上特定元素的布局。然后,当用户更改下拉列表的值时,将调用相同的javascript函数,但用户应更改他选择的新元素的布局。

问题是第一个函数保持活动状态,因此它们都会继续执行。这意味着用户然后更改第一个元素和第二个元素的布局(仅当第二个元素应该更改时)

代码提取:

//Called function in page load
general_layout_changes(chart_variables);

//Called function when dropbox value changes
$(document).on('change', '.report_item_choosen', function(){
    general_layout_changes(chart_variables);
});

//Part of the function
function general_layout_changes(chart_variables){
        $(document).on('keyup', '.change-text-x-label', function() {
            var changeText = $( this ).val();
            var svg = d3.select("#" + chart_variables.chart_id_name + "_content").transition();

            svg.select("text.x-label")  
                .text(changeText);  
        });
}

1 个答案:

答案 0 :(得分:1)

您在general_layout_changes函数的每次调用中,同一元素上的多次 相同的事件监听器:绑定另一个事件监听器。

您可以替换此处提供的整个代码:

$(document).on('keyup', '.change-text-x-label', function() {
    var changeText = $( this ).val();
    var svg = d3.select("#" + chart_variables.chart_id_name + "_content").transition();
    svg.select("text.x-label").text(changeText);
});

这样做会更好,但更好,因为它只会绑定事件一次。