我有一个调用时会导致用户界面明显阻塞的函数,怎样通过异步编程的设计来避免阻塞?

Question

这个函数由click事件触发,触发后整个页面就卡住大约一秒钟才响应过来.
这个函数很普通的,没有用到别的异步操作,纯粹的数组遍历处理一些字符串.

能否通过异步编程的设计来避免这种阻塞?怎么实现?

我看了阮一峰老师博客里介绍的四种异步编程方法,但好像其实并没有能实现非阻塞的作用,就像一段评论里所言:

崔永键 说：
将耗时的操作延迟执行，貌似没有什么意义。假设f3是界面，则先执行了f3此时界面能拖动，然后settimeout之后又去执行f1，此时f3不被执行，界面又卡了。
我认为所谓的异步执行，其实是settimeout所控制的那部分时间，让js在底层开辟了新的线程去做一些IO操作了。这样才实现了f3执行的时候界面不卡顿，忽然f1底层线程的IO操作完成了则执行f2，f2执行完了又回到f3.
尼玛，底层的多线程才是所谓的异步。 这些js所谓的异步编程根本都是语法而已，只有在f1函数中使用了ajax之类的底层多线程函数，才能利用起f3执行所用的那段setTimeout时间。

对了,由于还要兼容IE8,所以不能用webworker.

Answer 1

哈喽我来了，我就是当年评论的作者；现在回看当时的理解，基本上也算正确。
回答题主问题：

能否通过异步编程的设计来避免这种阻塞?怎么实现?

其实在单线程的js里面应该是无法实现的，对于单线程的JavaScript来说，无论在node还是浏览器中我们都要避免完全独占cpu的操作。对于这种操作有个解决办法就是把它放到浏览器的独立线程中，如 webworker。