在 for 循环迭代中创建延迟

发布于 2025-01-02 13:26:56 字数 403 浏览 0 评论 0原文

我编写了以下函数，希望在上边距上添加 1px，以使窗口滑出页面的动画效果。

目前它工作正常并从页面中删除窗口，但是我在 for 循环的每次迭代中创建延迟间隔时遇到问题。我考虑过使用 setTimeout() ，但是我不能就这么中断； for 循环我必须调用一个函数，

有什么想法吗？

function slideOut() {
    var obj = document.getElementById("cInstructs");
    var orig = 66;
    for(i=0; i<2000; i++) {
        orig++;
        obj.style.marginTop = orig+"px";
        }
    };

提前致谢！

原文

I've written the following function with hopes to add 1px onto the top margin to animate a window sliding out of the page.

Currently it works fine and removes the window from the page, However I'm having problems creating the delay interval in each iteration of the for loop. I've thought about using setTimeout(), but with this I cant just break; the for loop I have to call a function,

Any ideas?

function slideOut() {
    var obj = document.getElementById("cInstructs");
    var orig = 66;
    for(i=0; i<2000; i++) {
        orig++;
        obj.style.marginTop = orig+"px";
        }
    };

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开雨落又逢春i 2025-01-09 13:26:56

建议检查 jQuery .slideDown() 函数 - http://api.jquery.com/slideDown/

回复收藏 0 原文

公布 2025-01-09 13:26:56

var i;

function incrAndDelay(i) {
setTimeout(...);
i+=1;
return i;
}


function slideOut() {
    var obj = document.getElementById("cInstructs");
    var orig = 66;
    for(i=0; i<2000; incrAndDelay(i)) {
        orig++;
        obj.style.marginTop = orig+"px";
        }
    };

仍然需要调用函数，但不能在循环体中调用。

var i;

function incrAndDelay(i) {
setTimeout(...);
i+=1;
return i;
}


function slideOut() {
    var obj = document.getElementById("cInstructs");
    var orig = 66;
    for(i=0; i<2000; incrAndDelay(i)) {
        orig++;
        obj.style.marginTop = orig+"px";
        }
    };

Still have to call a function but not in the loop body.

回复收藏 0 原文

心凉怎暖 2025-01-09 13:26:56

var intId;
function slideOut() {
    clearInterval(intId);
    var count = 0;
    var obj = document.getElementById("cInstructs");
    var orig = 66;
    intId = setInterval(function(){
        orig++;
        obj.style.marginTop = orig+"px";
        if((++count == 2000)){
            clearInterval(intId);
        }
    }, 100);
}

var intId;
function slideOut() {
    clearInterval(intId);
    var count = 0;
    var obj = document.getElementById("cInstructs");
    var orig = 66;
    intId = setInterval(function(){
        orig++;
        obj.style.marginTop = orig+"px";
        if((++count == 2000)){
            clearInterval(intId);
        }
    }, 100);
}

回复收藏 0 原文

~没有更多了~