Question

我正在尝试编写一个函数，在单击它时为该元素绘制底部边框。该函数使用元素，最小宽度和最大宽度作为参数。当我与setTimeout（）一起使用它来调用自身时，它不起作用。

如果我在setTimeout（）中使用实际数字，它可以正常工作。我找不到问题所在......

任何人都可以提供帮助吗？

谢谢！

function drawBorder(elem,start_wid,end_wid)
{

//Checks if the header is in starting position.
//if it is - expend the width. If not decrease the width up to the starting
//position.
 if (elem.clientWidth <= start_wid)
  {
   increaseBorder(elem, end_wid);
  }
 else if (elem.clientWidth >= end_wid)
 {
  decreaseBorder(elem, start_wid);
 }
}


function increaseBorder(elem, end_wid)
 {
  elem.style.width=elem.clientWidth + 3 + "px";
  if (elem.clientWidth >= end_wid)
    {
     clearTimeout(timer2);
    }
  else {
    var str="increaseBorder(" + elem + ", " + end_wid + ");";            
    timer2=setTimeout(str,3);
 }
}

function decreaseBorder(elem, start_wid)
 {
  elem.style.width=elem.clientWidth - 3 + "px";
  if (elem.clientWidth <= )
   {
   clearTimeout(timer2);
   }
  else {
   var str="decreaseBorder(" + elem + ", " + start_wid + ");";
   timer2=setTimeout(str,3);
 }
}

Answer 1

您不能将对元素的引用作为字符串传递。此

var str="increaseBorder(" + elem + ", " + end_wid + ");";

会产生类似

的内容

"increaseBorder([object ...], 100);"

作为对象的默认字符串表示形式为[object <Class>]。在评估字符串时，它甚至会导致语法错误。

从不将字符串传递给setTimeout。直接传递函数：

function increaseBorder(elem, end_wid) {
     elem.style.width=elem.clientWidth + 3 + "px";
     if (elem.clientWidth >= end_wid) {
         clearTimeout(timer2);
     }
     else {          
         timer2 = setTimeout(function(){
             increaseBorder(elem, end_wid);
         }, 3);
     }
}

补充说明：

您还应修正其他错误，例如if (elem.clientWidth <= )，并且您应始终致电clearTimeout，以停止从其他功能启动的超时。

Answer 2

看起来函数increaseBorder和decreaseBorder未全局声明。当它传递给setTimeout的字符串时，它会在全局上下文中进行评估，这似乎是这里的问题。不要传递字符串，只需将函数传递给setTimeout。

var timer = setTimeout(function() {
    increaseBorder(elem, end_wid);
}, 3);

使用变量时，setTimeout（）方法不会执行

2 个答案: