Javascript 页面使用move.js动画循环冻结

这样做的目的是让这个脚本一直运行到满足某个条件为止。在这种情况下，条件是站点上的小部件已完成发送Ajax请求并接收和处理响应

问题是，每当运行函数load（）时，页面就会冻结

var animateWrap=u（document.getElementsByClassName（“进程\事务\包装”）；
var i=0；
函数加载（）{
animateWrap.append（“”）；
//创建加载对象
移动（“.loader”）
.set（“宽度”，“25px”）
.set（“高度”，“25px”）
.y（75）
.set（“背景色”、“ccc”）
.end（）；
而（i<1）{
移动（“.loader”）
.y（0）
.旋转（“180”）
.持续时间（“2秒”）
.end（函数（）{
移动（“.loader”）
.y（75）
.旋转（“360”）
.持续时间（“2秒”）
.end（）；
});
}
}
函数endLoad（）{
i++；
}

您在该循环中以极快的速度重复执行

move（）

。那会导致冰冻。您希望运行递归超时或简单的间隔，最好在

.duration（2s）

结束后运行

var animateWrap = u(document.getElementsByClassName("process_transaction_wrapper"));

var timer = null; //initialize a timer variable to hold timeout

function load() {
    animateWrap.append("<div class='loader'></div>");
    // Create Loading Object
    move(".loader")
        .set("width", "25px")
        .set("height", "25px")
        .y(75)
        .set("background-color", "#ccc")
        .end();

    callMovement(); //start movement OR call this in the end() function of the initial loading object
    keepMoving();   //start continuous movement
}

function keepMoving() {
    //assign a timeout to the timer
    timer = setTimeout(function () {
        callMovement();
        keepMoving(); //call same function again after 2000ms. You could probably call this inside .end() on this animation library of yours to preserve accuracy.
    }, 2000);
}

function callMovement() {
    move(".loader")
        .y(0)
        .rotate("180")
        .duration("2s")
        .end(function () {
            move(".loader")
                .y(75)
                .rotate("360")
                .duration("2s")
                .end();
        });
}

function endLoad() {
    clearTimeout(timer); //call this to stop recursion
}

var animateWrap=u（document.getElementsByClassName（“进程\事务\包装”）；
var定时器=null//初始化计时器变量以保持超时
函数加载（）{
animateWrap.append（“”）；
//创建加载对象
移动（“.loader”）
.set（“宽度”，“25px”）
.set（“高度”，“25px”）
.y（75）
.set（“背景色”、“ccc”）
.end（）；
callMovement（）；//开始移动或在初始加载对象的end（）函数中调用
keepMoving（）；//开始连续移动
}
函数keepMoving（）{
//为计时器指定一个超时
定时器=设置超时（函数（）{
callMovement（）；
keepMoving（）；//在2000毫秒后再次调用同一个函数。您可能可以在这个动画库中调用此函数，以保持准确性。
}, 2000);
}
函数callMovement（）{
移动（“.loader”）
.y（0）
.旋转（“180”）
.持续时间（“2秒”）
.end（函数（）{
移动（“.loader”）
.y（75）
.旋转（“360”）
.持续时间（“2秒”）
.end（）；
});
}
函数endLoad（）{
clearTimeout（timer）；//调用此函数以停止递归
}

---

等等，您正在创建加载微调器吗？您可以通过简单的类操作轻松地在css上实现这一点，并切换移动和显示。这比在JS中手动执行这样一个小任务要容易得多，是的，因为（i<1）永远无法解决，不是吗？因此，循环将在CPU时间内保持运行。为了防止系统崩溃，浏览器的解决方案是冻结页面。@AbanaClara，直到调用endLoad（）为止。有没有一种方法可以这样做以防止冻结？是的，但是没有调用

endLoad（）

；因此，循环无休止地运行。在方法链上的

.end（）

内调用endLoad（）。但是，我不知道这个库，所以我不确定。@AbanaClara它只是一个动画库。我试图做的是等待

I

从另一个函数接收到响应后被更改。您在该循环中以极端的速度重复执行

move（）

。那会导致冰冻。您希望运行递归超时或简单的间隔，最好在

.duration（2s）

结束后运行。

var animateWrap = u(document.getElementsByClassName("process_transaction_wrapper"));

var timer = null; //initialize a timer variable to hold timeout

function load() {
    animateWrap.append("<div class='loader'></div>");
    // Create Loading Object
    move(".loader")
        .set("width", "25px")
        .set("height", "25px")
        .y(75)
        .set("background-color", "#ccc")
        .end();

    callMovement(); //start movement OR call this in the end() function of the initial loading object
    keepMoving();   //start continuous movement
}

function keepMoving() {
    //assign a timeout to the timer
    timer = setTimeout(function () {
        callMovement();
        keepMoving(); //call same function again after 2000ms. You could probably call this inside .end() on this animation library of yours to preserve accuracy.
    }, 2000);
}

function callMovement() {
    move(".loader")
        .y(0)
        .rotate("180")
        .duration("2s")
        .end(function () {
            move(".loader")
                .y(75)
                .rotate("360")
                .duration("2s")
                .end();
        });
}

function endLoad() {
    clearTimeout(timer); //call this to stop recursion
}