Question

我有一些Jquery可以直接放大和缩小横幅图像。当我运行它时，我在浏览器中收到堆栈限制错误。它仍然运行，但有没有办法让它“只是及时”加载到堆栈中？在查看堆栈时，它会在初始加载时一遍又一遍地加载zoomIn()和zoomOut()，直到达到限制为止，因此页面加载速度非常慢。

$(document).ready(function(){

    $bannerImg = $('.post-picture img')

    function zoomIn(){
        $bannerImg.animate({
            width: 1500,
        }, 50000,'linear');

        $bannerImg.promise().done(zoomOut());
    }

    function zoomOut(){
        $bannerImg.animate({
            width: 1500,
        }, 50000,'linear');

        $bannerImg.promise().done(zoomIn());
    }

    zoomIn();

});

更新：感谢您的回答。使用完成（ZoomOut / ZoomIn）工作。

Answer 1

您正在调用.done()中的函数，而不是将其作为参数传递。

$bannerImg.promise().done(zoomOut());

应该是

$bannerImg.promise().done(zoomOut);

和

$bannerImg.promise().done(zoomIn());

应该是

$bannerImg.promise().done(zoomIn);

Answer 2

.done()需要一个函数引用 - 一旦promise对象被解析，函数pass就会被执行。相反，你只是调用函数（不返回任何内容，undefined，无论如何）。如果这样做，函数将不断相互调用，充当无限循环。使用此：

$bannerImg.promise().done(zoomOut);
// and later:
$bannerImg.promise().done(zoomIn);

DEMO： http://jsfiddle.net/G6uWs/

（我必须更改数字以使其可用）

参考：

http://api.jquery.com/deferred.done/

Answer 3

看起来你正在造成无限循环。幸运的是，jQuery有一个完整的回调，你可以利用它来防止无限循环。

不间断放大和缩小横幅

$(document).ready(function () {

    $bannerImg = $('.post-picture img');

    function zoomIn() {
        $bannerImg.animate({
            width: 1500
        }, {
            duration: 10000,
            complete: function () {
                zoomOut();
            }
        });
    }

    function zoomOut() {
        $bannerImg.animate({
            width: 100
        }, {
            duration: 10000,
            complete: function () {
                zoomIn();
            }
        });
    }

    zoomIn();

});

* 来源：* jsfiddle

Jquery Animate无限循环：如何避免堆栈限制

3 个答案: