如何在“后台”/不冻结 UI 中运行 javascript 函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18894830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 13:36:32  来源:igfitidea点击:

How to run javascript function in "background" / without freezing UI

javascript

提问by kivikall

I've done an HTML form which has a lot of questions (coming from a database) in many different tabs. User then gives answers in those questions. Each time a user changes a tab my Javascript creates a save. The problem is that I have to loop through all questions each time the tab is changed and it freezes the form for about 5 seconds every time.

我已经完成了一个 HTML 表单,它在许多不同的选项卡中有很多问题(来自数据库)。然后用户在这些问题中给出答案。每次用户更改选项卡时,我的 Javascript 都会创建一个保存。问题是每次更改选项卡时我都必须遍历所有问题,并且每次都会冻结表单约 5 秒钟。

I've been searching for an answer how I can run my save function in the background. Apparently there is no real way to run something in the background and many recommend using setTimeout();For example this one How to get a group of js function running in background

我一直在寻找如何在后台运行我的保存功能的答案。显然没有真正的方法可以在后台运行某些东西,很多人推荐使用setTimeout();例如这个如何在后台运行一组 js 函数

But none of these examples does explain or take into consideration that even if I use something like setTimeout(saveFunction, 2000);it doesn't solve my problem. It only postpones it by 2 seconds in this case.

但是这些例子都没有解释或考虑到即使我使用类似的东西setTimeout(saveFunction, 2000);也不能解决我的问题。在这种情况下,它只会推迟 2 秒。

Is there a way to solve this problem?

有没有办法解决这个问题?

采纳答案by T.J. Crowder

Apparently there is no real way to run something on background...

显然没有真正的方法可以在后台运行某些东西......

There is on most modern browsers(but not IE9 and earlier): Web Workers.

大多数现代浏览器(但不是 IE9 及更早版本)都有:Web Workers

But I think you're trying to solve the problem at the wrong level: 1. It should be possible to loop through all of your controls in a lotless than five seconds, and 2. It shouldn't be necessaryto loop through all controls when only one of them has changed.

但我认为你正在试图解决在错误级别的问题:1。它应该可以遍历所有的控件在很多不到五秒钟,2。它不应该是必要通过所有循环当其中只有一个发生变化时进行控制。

I suggest looking to those problems before trying to offload that processing to the background.

我建议在尝试将处理卸载到后台之前查看这些问题。

For instance, you could have an object that contains the current value of each item, and then have the UI for each item update that object when the value changes. Then you'd have all the values in that object, without having to loop through all the controls again.

例如,您可以拥有一个包含每个项目的当前值的对象,然后让每个项目的 UI 在值更改时更新该对象。然后,您将拥有该对象中的所有值,而无需再次遍历所有控件。

回答by Fenixp

You could take a look at HTML5 web workers, they're not all that widely supported though.

你可以看看HTML5 web workers,虽然它们并没有得到广泛的支持。

回答by alejo802

This library helped me out a lot for a very similar problem that you describe: https://github.com/kmalakoff/background

这个库帮助我解决了你描述的一个非常相似的问题:https: //github.com/kmalakoff/background

It basically a sequential background queue based on the WorkerQueue library.

它基本上是一个基于 WorkerQueue 库的顺序后台队列。

回答by pasquale

This works in background:

这在后台工作:

setInterval(function(){ d=new Date();console.log(d.getTime()); }, 500);

回答by ramu

Just create a hidden button. pass the function to its onclick event. Whenever you want to call that function (in background), call the button's click event.

只需创建一个隐藏按钮。将函数传递给它的 onclick 事件。每当您想调用该函数(在后台)时,请调用按钮的单击事件。

<html>
<body>
    <button id="bgfoo" style="display:none;"></button>

    <script>
    function bgfoo()
    {
        var params = JSON.parse(event.target.innerHTML);
    }

    var params = {"params":"in JSON format"};
    $("#bgfoo").html(JSON.stringify(params));
    $("#bgfoo").click(bgfoo);
    $("#bgfoo").click(bgfoo);
    $("#bgfoo").click(bgfoo);
    </script>
</body>
</html>