javascript - 在 JQuery\JavaScript 中传递了一段时间（几分之一秒）之后，我该如何执行操作？

Question

我必须在延迟时间（几分之一秒）后执行操作。

其实我有这个代码部分：

$("thead.opening").click(function () {
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    alert("INTO second function, chrome: " + is_chrome);

    $(this).next().css('width', '10000000em');
    $(this).next().css('display', 'table-row-group');

});

我需要做的是替换此警报（）：

alert("INTO second function, chrome: " + is_chrome);

等待一段时间的操作。

我该怎么做？

谢谢

Answer 1

您可以使用纯 JavaScript 函数 setTimeout

setTimeout(
  function() 
  {
    //Execute the code to be run
  }, 1000);

最终解决方案

$("thead.opening").click(function () {
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;


    setTimeout(
      function() 
      {
        //Execute the code to be run
    $(this).next().css('width', '10000000em');
    $(this).next().css('display', 'table-row-group');
      }, 1000);


});

Answer 2

使用超时；在 javascript 中，您可以使用 setTimeout 来：

在指定的延迟后调用函数或执行代码片段。

喜欢：

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var $myNext=$(this).next();

if (is_chrome) {
    window.setTimeout(function() {
         $myNext.css({width: '10000000em', display: 'table-row-group'});
    }, 1000);
}

演示：http: //jsfiddle.net/4pxedhzd/

参考：https ://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Answer 3

代替

alert("INTO second function, chrome: " + is_chrome);

和

if(is_chrome) {
    var that = this;
    window.setTimeout(function() {
        $(that).next().css({'width':'10000000em', 'display':'table-row-group'});
    }, 1000);
}

这将在 1000 毫秒（=1 秒）后运行该函数。您必须设置that = this，因为this函数中有另一个上下文。

JSFiddle 演示：https ://jsfiddle.net/0eajx8sv/

Answer 4

我建议不要在代码中间使用典型的“等待”，因为这是 JavaScript 通常使用的回调。

我建议使用“setTimeout”函数让 JavaScript 调用在执行下一个操作之前等待一些特定时间。以下是它在您的场景中的使用方式：

$("thead.opening").click(function () {
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    setTimout(waitedCall(), millisecondsToWait);
});

//This function will now be called after "millisecondsToWait" ms. And then execute the rest of the code
function waitedCall()
{
    $(this).next().css('width', '10000000em');
    $(this).next().css('display', 'table-row-group');
}