Question

我试图写一个功能来慢慢地在屏幕上移动图像。相关的html如下：

＆＃13;

var dom, timer;

    function initImage() {
        dom = document.getElementById('animate').style;
        dom.position = 'absolute';
        dom.top = "165px";
        dom.left = "767px";
        regulate(1115,165);
        regulate(1115,540);
        regulate(767,540);
        regulate(767, 165);
    }
    
    function regulate(xfinal, yfinal) {
        var timer = setInterval(function() {moveImage(xfinal,yfinal)}, 1);
        return true;
    }

    function moveImage(xfinal, yfinal) {
        var x = parseInt(dom.left.match(/\d+/));
        var y = parseInt(dom.top.match(/\d+/));
        
        if ((x == xfinal) && (y== yfinal)) {clearInterval(timer);}
        else {
            if (x != xfinal) {
                if (x < xfinal) {x++;}
                else {x--;};
                dom.left = x + "px";}
            else {
                if (y < yfinal) {y++;}
                else {y--;};
                dom.top = y + "px";};
            };
        return true;
    }

＆＃13;

<img src='http://placehold.it/200' alt='Sir Victor' width=50 height=50
     id='animate' onload='initImage();' style='position:absolute;'/>

＆＃13;

此算法适用于第一次调用adjust（）的函数，但是当我取消注释其中三个中的一个并尝试运行它时，图像要么根本不移动，要么移动得比正常情况快，但只沿第一条路径。是否有某种原因这个功能第二次没有像预期的那样发挥作用？

我是javascript的新手，所以请随意指出其他任何看似愚蠢或过于复杂的内容。

Answer 1

One problem is that you can't pass the contents of the timer variable to setInterval() in this line:

 var timer = setInterval(moveImage, 1, xfinal, yfinal, timer);

because the value of timer is not available until after setInterval() returns.

Thus, you will just be passing undefined for that value so your clearInterval() in moveImage() will not work properly.

The usual way to solve this problem is to declare the timer variable in some higher level shared scope so it will be available as needed.

Answer 2

不是一次调用所有regulate函数;设置队列。

＆＃13;

var dom;
var timer;
var queueIndex = 0;
var positions = [
    [300, 0],
    [300, 100],
    [0, 100],
    [0, 0]
];

function initImage() {
    dom = document.getElementById('animate').style;
    dom.position = 'absolute';
    dom.top = "0px";
    dom.left = "0px";
    regulate.apply(null, positions[queueIndex]);
}

function regulate(xfinal, yfinal) {
    timer = setInterval(moveImage, 1, xfinal, yfinal);
    return true;
}

function moveImage(xfinal, yfinal) {
    var x = parseInt(/\d+/.exec(dom.left) || 0);
    var y = parseInt(/\d+/.exec(dom.top) || 0);

    if ((x == xfinal) && (y == yfinal)) {
        clearInterval(timer);
        queueIndex++;
        if (positions[queueIndex]) {
            regulate.apply(null, positions[queueIndex]);
        }
    } else {
        if (x != xfinal) {
            if (x < xfinal) {
                x++;
            } else {
                x--;
            };
            dom.left = x + "px";
        } else {
            if (y < yfinal) {
                y++;
            } else {
                y--;
            };
            dom.top = y + "px";
        };
    };
    return true;
}

＆＃13;

<img src='https://libcom.org/files/images/library/black-square.jpg' alt='Sir Victor' width=50 height=50 id='animate' onload='initImage();' style='position:absolute;' />

＆＃13;

无法两次调用Javascript函数

2 个答案: