Question

我在我的ASP中有一个gridview和一个下拉列表，在C＃中我有一些功能，允许用户选择哪个下拉列表项应用于每个gridview行。

所以在JavaScript中我希望每个下拉列表项都有幻灯片功能，并计算有多少gridview行包含该项。

我试图让代码以一致的速度运行（每个下拉列表项目2秒）

以下是我的JavaScript

$(document).ready(function () {
    loop();
});

function loop() {
    var ddl = document.getElementById("cphMain_ddlInc");
    for (var j = 1; j < ddl.options.length; j++) {
        setTimeout(shippedEmbryos(j), 2000);
    }
}

function shippedEmbryos(j) {
    var st = $("input[id*=txtShipped]");
    var grid = document.getElementById("cphMain_gvFertEntry");
    var ddl = document.getElementById("cphMain_ddlInc");
    var embryos = 0;
    var ddlValue = ddl.options[j].innerHTML;
    for (var i = 1; i < grid.rows.length - 1; i++) {
        if (ddlValue == grid.rows[i].cells[2].innerHTML) {
            var txtbox = $("input[id*=txtShipped]");
            var x = txtbox[i].value;
            if (x == "") {
                x = 0;
            }
        }
        else {
            x = 0;
        }
        embryos += parseInt(x);
    }
    var label = document.getElementById("cphMain_lblShippedEmbryos");
    label.innerHTML = "Embryos Shipped for " + ddlValue + ": " + embryos;
};

Answer 1

JavaScript不能像那样工作......

该语言是单线程的，这意味着如果你睡了两秒钟，那么就会被锁定。这包括您当前的窗口 - 您尝试在屏幕上绘制的所有内容。

在许多浏览器所有窗口冻结。

你需要在这里进行事件驱动的编程，在这里你可以触发一个事件来绘制下一个谎言。

有许多解决方法取决于您是否可以通过交叉编译器使用ES7 await / async，或者您是否可以使用ES6的Promise。最后，ES5会为您提供setTimeout

What is the JavaScript version of sleep()?

Answer 2

如果你想在JS中等一段时间，你就不能保持循环，因为它会阻塞线程您可以使用 setTimeout 方法，也可以使用 Window.requestAnimationFrame（）方法，它可以更好地适应您当前的代码。

这是草稿（从MDN示例代码修改）

var start;
function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;

  // trigger every 2000ms, equal 2s
  if (progress >= 2000) {
    //reset start time
    start = timestamp;
    // do whatever you want ..., such as call shippedEmbryos()

    //start another loop
    requestAnimationFrame(step);
  }
}

MDN:Window.requestAnimationFrame() - 此方法调用每一帧，它是浏览器友好的API（不会影响页面呈现性能）。
它有一个参数：timestamp，浏览器系统会自动传递当前时间戳看起来像这样：55378.47799999872 55395.189000002574 55411.900000006426 ....
然后你可以像递归一样调用方法如果你想停止，只是不要调用方法。

Javascript循环与睡眠

2 个答案: