javascript - 使用move.js动画循环冻结页面(Page Freezes with move.js animation loop)

Question

The goal of this is to have this script run until a certain condition is met.(目的是使此脚本运行到满足特定条件为止。)

In this case the condition would be that say a widget on the site has completed sending an Ajax request and received and processed a response.(在这种情况下，条件是说站点上的窗口小部件已完成发送Ajax请求并已接收并处理了响应。) Issue is that the page freezes up whenever the function load() is run.(问题是，每当运行load（）函数时，页面就会冻结。) var animateWrap = u(document.getElementsByClassName("process_transaction_wrapper")); var i = 0; 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(); while(i < 1) { move(".loader") .y(0) .rotate("180") .duration("2s") .end(function(){ move(".loader") .y(75) .rotate("360") .duration("2s") .end(); }); } } function endLoad(){ i++; }   ask by Tristan Schlarman translate from so

Answer 1

You are executing move() very repetitively at an extreme pace inside that loop.(您正在该循环内以极快的速度重复执行move() 。)

That is going to cause a freeze.(那将导致冻结。) You want to run a recursive timeout or a simple interval, preferably after your .duration(2s) ends.(您想运行一个递归超时或一个简单的间隔，最好在.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 } Wait are you creating a loading spinner?(等待中，您正在创建加载微调器吗？) You can easily make this on css and toggle movement and displays by simple class manipulation.(您可以通过简单的类操作轻松地在css上进行设置并切换运动和显示。) It is miles easier than manually doing such a small task in JS(比在JS中手动完成这么小的任务要容易得多)