javascript - 我怎样才能重新开始 offset();反复发挥作用

Question

所以我花了很多时间来制作这段代码，它可以工作，但我唯一无法修复的错误是让它反复循环。谁能就这个问题及其解决方案提出一些建议？

 <h1 id="heading">Hello</h1>

 var offsetLeft = 0;
 var offsetTop = 0;
 var offsetLeftReverse = 200;
 var offsetTopReverse = 200;

 var moveHeading = function () {
     $("#heading").offset({ left: offsetLeft, top: offsetTop});

    if(offsetLeft < 200){
        offsetLeft++;
    } else if (offsetTop < 200){
        offsetTop++;
    }
 };

var moveHeadingReverse = function () {
     $("#heading").offset({ left: offsetLeftReverse, top: offsetTopReverse});

    if(offsetLeftReverse > 0 ){
        offsetLeftReverse--;
    } else if (offsetTopReverse > 0){
        offsetTopReverse--; 
    } 
 };

var engine = function () {
   if ( (offsetTop === 0 && offsetLeft <= 200) || (offsetTop < 200 && offsetLeft === 200) ){
        moveHeading(); 
    } 
   else if ( (offsetTopReverse === 200 && offsetLeftReverse <= 200) || (offsetTopReverse <= 200 && offsetLeftReverse === 0) &&
            ( offsetTopReverse != 0 || offsetLeftReverse != 0 ) ){
       moveHeadingReverse();
       console.log("reverse");
       console.log(offsetTopReverse,offsetLeftReverse);
    } 
}

var start = setInterval(engine, 5); 

Answer 1

试试这个:你必须处理偏移量为 0 的情况，然后将你的变量重置为开始状态，然后再次调用引擎(为你做了间隔):

var engine = function () {
   if ( (offsetTop === 0 && offsetLeft <= 200) || (offsetTop < 200 && offsetLeft === 200) ){
        moveHeading(); 
    } 
   else if ( (offsetTopReverse === 200 && offsetLeftReverse <= 200) || (offsetTopReverse <= 200 && offsetLeftReverse === 0) &&
            ( offsetTopReverse != 0 || offsetLeftReverse != 0 ) ){
       moveHeadingReverse();
       console.log("reverse");
       console.log(offsetTopReverse,offsetLeftReverse);
    } else if ( offsetTopReverse === 0 && offsetLeftReverse === 0) {
        offsetLeft = 0;
            offsetTop = 0;
            offsetLeftReverse = 200;
            offsetTopReverse = 200;
    }
}

查看 fiddle :https://jsfiddle.net/yfp9f70g/