标签: settimeout

我有一个功能可以通过 api post 请求更新用户。后台还没做好。因此，该函数将始终返回错误。为了测试加载和错误状态，我想在返回结果之前临时添加一个假延迟。怎么做呢？这是函数：

const updateProfile = async (form) => {
  try {
    const res = await api.post("/update-profile", form);
    return res;
  } catch (err) {
    throw new Error("error.unknown");
  }
};

写这个不起作用：

const updateProfile = async (form) => {
  try {
    let fakeCallDone = false
    setTimeout(()=> fakeCallDone = true, 2000)
    const res = await api.post("/update-profile", form);
    fakeCallDone && res;
  } catch (err) {
    throw new Error("error.unknown");
  }
};

使用时setTimeout,必须将要执行的代码放入字符串中:

setTimeout('alert("foobar!");', 1000);

但是,我想执行一个函数,我在变量中有一个引用.我希望能够这样做:

var myGreatFunction = function() { alert("foobar!"); };
// ...
setTimeout('myGreatFunction();', 1000);

(虽然在现实生活中,警报是一段较长的代码,并myGreatFunction作为参数传递给其他函数,在其中setTimeout调用它.)

当然,当超时触发时,myGreatFunction不是已识别的功能,因此它不会执行.

我希望javascript让我这样做,但它没有:

setTimeout(function() { myGreatFunction(); }, 1000);

这周围有一个很好的方式吗？

如果我没有弄错,eval会在给定的字符串中执行有效的代码

eval("alert('hey')");

和

setTimeout("alert('hey')",1000);

做同样的事情,只有一个计时器.设置超时和eval一样有风险吗？

通过使用setTimeout方法调用函数而不是直接调用函数,可以在javascript中避免堆栈溢出吗？我对setTimeout的理解是它应该启动一个新的callstack.当我查看chrome和IE的callstack时,似乎setTimeout调用正在等待函数调用返回.

这只是调试器的属性还是我的理解有缺陷？

编辑

虽然下面提供的答案是正确的,但我遇到的实际问题与我调用setTimeout(aFunction(),10)的事实有关,因为括号因此立即评估aFunction.这个问题把我排除在外.

我只需要通过3个元素变体创建一个无限循环.这是我到目前为止:

    var count = 1;
    setTimeout(transition, 2000);

    function transition() {

        if(count == 1) {
            $('#ele').html('variation 2');
            var count = 2;

        } else if(count == 2) {
            $('#ele').html('variation 3');
            var count = 3;

        } else if(count == 3) {
            $('#ele').html('variation 1');
            var count = 1;
        }

        setTimeout(transition, 2000);

    }

我有一些代码将类添加到元素,然后尝试删除它们,并在1秒后添加不同的类.我得到一些非常奇怪的行为,我甚至无法在一个简单的jsfiddle示例中重现.

这是我的相关JavaScript代码:

console.log('before destroyed: ' + currentTile.get(0).className);
currentTile.addClass(classes.destroyed);
console.log('after destroyed: ' + currentTile.get(0).className);

setTimeout(function () {
    console.log('before blanking: ' + currentTile.get(0).className);
    currentTile.removeClass().addClass(classes.blank + ' ui-draggable');
    console.log('after blanking: ' + currentTile.get(0).className);
}, 2000);

以下是控制台的说法:

正如你所看到的,添加destroyed该类工作正常,但对removeClass()内部的调用setTimeout似乎什么都不做,然后.addClass(classes.blank + ' ui-draggable');似乎也正常工作.另外,如果我将一个类传递给removeClass它,那么删除那个没有问题的类.

如果这是一个背景问题或currentTile错误的元素,我会认为addClass这也会失败？任何人都知道这里发生了什么？

附加信息:jQuery最新(我认为v.1.9.0),jQuery UI v 1.10.0,Chrome v.24.0.1312.56 m

编辑:问题似乎与jQuery UI直接相关,可以在这个小提琴中看到发生.

编辑2:这被确认为jQuery中的一个错误,并已得到修复.

I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it from stuttering as much. Here is my current code:

<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="videos/backgroundvideo.mp4" type="video/mp4"> 
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>

Any help is greatly appreciated!!

我们如何在页面加载后进行ajax调用.

我需要在加载10秒文档后进行ajax调用.

function loadajax(){
  $.ajax({ 
    url:'test',
    data:"username=test",
    type:"post",
    success:function(){
     //do action
    }
  });
}
 $('document').load(function(){
setTimeout(function(){
   loadajax();
 },10000);

});

我是这样做的.但没有成功.

我有一个工作的加载组件,它在加载8秒后取消.这段代码有效,但感觉不对我,我想知道是否有更好的方法来做到这一点.

没有设置this.mounted我得到错误:

警告:只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState,replaceState或forceUpdate.这是一个无操作.请检查加载组件的代码.

这让我觉得计时器没有被取消所以继续this.seState.如果我clearTimeout进去,为什么会这样componentWillUnmount？有没有比使用全局更好的方法来解决这个问题this.mounted？

class Loading extends Component {
  state = {
    error: false,
  };

  componentDidMount = () => {
    this.mounted = true;
    this.timer();
  };

  componentWillUnmount = () => {
    this.mounted = false;
    clearTimeout(this.timer);
  };

  timer = () =>
    setTimeout(() => {
      (this.mounted && this.setState({ error: true })) || null;
    }, 8000);

  render() {
    const { showHeader = false } = this.props;
    const { error } = this.state;
    return ( …

请尝试运行以下代码段，然后单击该框。

const box = document.querySelector('.box')
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)'
    new Promise(resolve => {
      setTimeout(() => {
        box.style.transition = 'none'
        box.style.transform = ''
        resolve('Transition complete')
      }, 2000)
    }).then(() => {
      box.style.transition = ''
    })
  }
})

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

<div class = "box"></div>

我期望发生的事情：

• 点击发生
• Box 开始水平平移 100px（此操作需要两秒钟）
• 单击时，Promise还会创建一个新的。里面说Promise，一个setTimeout函数设置为2秒
• 操作完成后（两秒钟过去了），setTimeout运行其回调函数并设置transition为无。这样做之后，setTimeout也恢复transform …