Question

来自JSHint.com：

函数声明不应放在块中。使用功能表达式或将语句移动到外部函数的顶部。

JSHint告诉我将此功能移出成功回调。

function matchContainerHeight() {
    var containerHeight = $('#project-container').outerHeight();
    $('#project-wrapper.activated').css('max-height', containerHeight);
}
setTimeout(matchContainerHeight, 100);
$(window).on('resize', matchContainerHeight);

但是，我不确定如何做到这一点，因为containerHeight来自响应本身，取决于响应返回后容器的高度。但话说回来，我对JS并不太精明，所以也许有办法。如果是这样，请帮助我。谢谢。

以下是完整代码：

    function openProject() {

        var post_id = $(this).data('id'), // data-id attribute for .post-link
            ajaxURL = site.ajaxURL; // Ajax URL localized from functions.php

        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            success: function(response) {

                $('#project-container').html(response).imagesLoaded().then(function() {

                    resize();

                    // If the user has scrolled...
                    if ($(window).scrollTop() !== 0) {

                        // First scroll the page to the top
                        $('html, body').animate({
                            scrollTop : 0
                        },400, function() {

                            // Make the max-height of the container exact for a smoother transition
                            function matchContainerHeight() {
                                var containerHeight = $('#project-container').outerHeight();
                                $('#project-wrapper.activated').css('max-height', containerHeight);
                            }
                            setTimeout(matchContainerHeight, 100);
                            $(window).on('resize', matchContainerHeight);

                        });

                    // If the user has not scrolled...
                    } else {

                        // Make the max-height of the container exact for a smoother transition
                        function matchContainerHeight() {
                            var containerHeight = $('#project-container').outerHeight();
                            $('#project-wrapper.activated').css('max-height', containerHeight);
                        }
                        setTimeout(matchContainerHeight, 100);
                        $(window).on('resize', matchContainerHeight);

                    }

                    return false;
                });
            }
        });
    }

Answer 1

提示说你可以移动块或之外的函数你可以将它放到函数表达式中，如下所示：

var matchContainerHeight = function() {
    var containerHeight = $('#project-container').outerHeight();
    $('#project-wrapper.activated').css('max-height', containerHeight);
}
setTimeout(matchContainerHeight, 100);
$(window).on('resize', matchContainerHeight);

但是，假设您的条件都使用相同的逻辑，则在这种情况下最好将其移出if条件并移至两个条件块范围内的位置，如jsHint所示。试试这个：

// $.ajax({...
    success: function (response) {
        $('#project-container').html(response).imagesLoaded().then(function () {
            resize();

            // If the user has scrolled...
            if ($(window).scrollTop() !== 0) {
                // First scroll the page to the top
                $('html, body').animate({
                    scrollTop: 0
                }, 400, function () {
                    // Make the max-height of the container exact for a smoother transition
                    matchContainerHeight()
                });
            // If the user has not scrolled...
            } else {
                // Make the max-height of the container exact for a smoother transition
                matchContainerHeight()
            }
            return false;
        });
    }
// });

function matchContainerHeight() {
    var heightHandler = function() {
        var containerHeight = $('#project-container').outerHeight();
        $('#project-wrapper.activated').css('max-height', containerHeight);
    }
    setTimeout(heightHandler, 100);
    $(window).on('resize', heightHandler);
}

Answer 2

所有JSHint都告诉您，不应将函数定义语句直接放在if / else / when / for块中。如果您这样做，它不会抱怨，您将获得完全相同的功能：

$('#project-container').html(response).imagesLoaded().then(function() {
    // Make the max-height of the container exact for a smoother transition       
    function matchContainerHeight() {
        var containerHeight = $('#project-container').outerHeight();
        $('#project-wrapper.activated').css('max-height', containerHeight);
    }

    resize();

    // If the user has scrolled...
    if ($(window).scrollTop() !== 0) {
        // First scroll the page to the top
        $('html, body').animate({
            scrollTop : 0
        }, 400, function() {
            setTimeout(matchContainerHeight, 100);
            $(window).on('resize', matchContainerHeight);
        });
    } else {
        // If the user has not scrolled...
        setTimeout(matchContainerHeight, 100);
        $(window).on('resize', matchContainerHeight);
    }
});

matchContainerHeight不依赖于其封闭范围内的任何变量，更糟糕的是，您将其定义为相同的两倍。你可以把它完全从你的AJAX回调中移出来，你就可以了：

 // Make the max-height of the container exact for a smoother transition
function matchContainerHeight() {
    var containerHeight = $('#project-container').outerHeight();
    $('#project-wrapper.activated').css('max-height', containerHeight);
}

function scheduleMatchContainerHeight() {
    setTimeout(matchContainerHeight, 100);
    $(window).on('resize', matchContainerHeight);
}

function openProject() {
    var post_id = $(this).data('id'), // data-id attribute for .post-link
        ajaxURL = site.ajaxURL; // Ajax URL localized from functions.php

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').html(response).imagesLoaded().then(function() {
                resize();

                // If the user has scrolled...
                if ($(window).scrollTop() !== 0) {
                    // First scroll the page to the top
                    $('html, body').animate({
                        scrollTop : 0
                    }, 400, scheduleMatchContainerHeight);
                } else {
                    // If the user has not scrolled...
                    scheduleMatchContainerHeight();
                }
            });
        }
    });
}

移动一个依赖于Ajax成功回调的函数来回调用？

2 个答案: