Question

请原谅我这是一个非常基本的问题，但我希望有人可以非常清楚地向JS初学者解释。

我注意到我在两个地方使用了相同的代码，因此开发了一个函数。但我想使用我在此函数中创建的变量在完成后使用。这是一个代码示例：

function calculate_animation(direction) {
    var theWidth = parseInt(visibleArea.outerWidth() - 70),
        currentMargin = parseInt(listingsSlider.css('margin-left')),
        hoursVisible = Math.floor(theWidth / itemWidth),
        hoursWidth = itemWidth * hoursVisible,
        newMargin = currentMargin - hoursWidth;
}


forwardBtn.click(function () {
    calculate_animation();

    // animate the slider
    listingsSlider.animate({
        'margin-left': newMargin + 'px'
    });
});

所以我在newMargin函数中创建了一个名为calculate_animation的新变量，我试图在下面的animate函数中使用它。

我需要做些什么来实现这一目标？

Answer 1

您的功能需要return关键字...

function calculate_animation(direction) {
        var theWidth        =  parseInt(visibleArea.outerWidth() - 70),
            currentMargin   = parseInt(listingsSlider.css('margin-left')),
            hoursVisible    = Math.floor(theWidth / itemWidth),
            hoursWidth    = itemWidth * hoursVisible,
            newMargin       =  currentMargin - hoursWidth;

        return newMargin;
}


forwardBtn.click(function () {
        var newMargin = calculate_animation();

        // animate the slider
        listingsSlider.animate({'margin-left' : newMargin + 'px'});
});

Answer 2

这是一个范围问题。 newMargin变量在函数内部定义，因此变量的范围从函数的开头开始，在函数的开头用var关键字定义，并在函数的末尾结束。

您可以使用return newMargin将计算出的值返回给调用者。

见下文，

function calculate_animation(direction) {
        var theWidth        =  parseInt(visibleArea.outerWidth() - 70),
            currentMargin   = parseInt(listingsSlider.css('margin-left')),
            hoursVisible    = Math.floor(theWidth / itemWidth),
            hoursWidth    = itemWidth * hoursVisible,
            newMargin       =  currentMargin - hoursWidth;

        return newMargin;
}


forwardBtn.click(function () {
        // animate the slider
        listingsSlider.animate({'margin-left' : calculate_animation() + 'px'});
});

Answer 3

您需要将其返回到被调用的函数，并在被调用函数中使用该变量。

function calculate_animation(direction) {
    var theWidth = parseInt(visibleArea.outerWidth() - 70),
        currentMargin = parseInt(listingsSlider.css('margin-left')),
        hoursVisible = Math.floor(theWidth / itemWidth),
        hoursWidth = itemWidth * hoursVisible,
        newMargin = currentMargin - hoursWidth;
    return newMargin;
}


forwardBtn.click(function () {
    var newMargin = calculate_animation();

    // animate the slider
    listingsSlider.animate({
        'margin-left': newMargin + 'px'
    });
});

Answer 4

你可以简单地return :(方向参数是什么？你没有在任何地方使用它）

function calculate_animation(direction) {
        var theWidth        =  parseInt(visibleArea.outerWidth() - 70),
            currentMargin   = parseInt(listingsSlider.css('margin-left')),
            hoursVisible    = Math.floor(theWidth / itemWidth),
            hoursWidth    = itemWidth * hoursVisible,
            newMargin       =  currentMargin - hoursWidth;

        return newMargin;
}


forwardBtn.click(function () {
        var newMargin = calculate_animation();

        // animate the slider
        listingsSlider.animate({'margin-left' : newMargin + 'px'});
});

Answer 5

您可以从该函数返回，而是全局声明变量并在需要时更改其值。

Javascript：在触发函数后返回变量以供使用

5 个答案: