PyQt5 How to update GUI when use evaluateJavaScript if python is still running

I would like to modify my GUI dynamically with the evaluateJavaScript command

I noticed that the GUI is updated only when python has finished working. I created this example code:

Base GUI:

webView = QWebView()
myObj = ExampleClass(webView)
webView.page().mainFrame().addToJavaScriptWindowObject("pyObj", myObj)
webView.setHtml('''
<html>
    <body>
        <div id="content"></div>
        <button onClick="pyObj.example()">start</button>
    </body>
</html>
''')

Python code for update Html GUI:

class ExampleClass(QtCore.QObject):
    def __init__(self, webView):
        super(ExampleClass, self).__init__(webView)
        self.webView = webView

    @QtCore.pyqtSlot()
    def example(self):
        print("start")
        for i in range(0,5):
            print(i)
            self.webView.page().mainFrame().evaluateJavaScript('document.getElementById("content").innerHTML = "'+str(i)+'";')
            time.sleep(1)
            #simulation of a heavy code
            for a in range(0,999):
                for b in range(0,9999):
                    c = a * b;

Objective: after pressing the "start" button I would like to see the numbers 0 1 2 3 4 sequentially appear in my GUI. Current result: after pressing the "start" button for N seconds nothing happens and then the number 4 appears

Solution

As @gelonida points out, the solution in general is to use threads and notify the GUI through signals, so my answer provides a possible implementation.

To implement in threads, the for-loop must be rearranged in sequential tasks, for example using iterators, and then call the next one when the task has been completed through a signal. For the time-consuming task in this case I have created a worker who lives in another thread and the "task" method must be invoked.

import sys
from PyQt5 import QtCore, QtWidgets, QtWebKitWidgets


class Worker(QtCore.QObject):
    finished = QtCore.pyqtSignal()

    @QtCore.pyqtSlot()
    def task(self):
        # simulation of a heavy code
        for a in range(999):
            for b in range(9999):
                c = a * b
        self.finished.emit()


class ExampleClass(QtCore.QObject):
    def __init__(self, webView):
        super(ExampleClass, self).__init__(webView)
        self.webView = webView

        thread = QtCore.QThread(self)
        thread.start()

        self.m_worker = Worker()
        self.m_worker.moveToThread(thread)
        self.m_worker.finished.connect(self.execute)

        self.m_numbers = None

    @QtCore.pyqtSlot()
    def example(self):
        print("example")
        self.m_numbers = iter(range(5))
        self.execute()

    @QtCore.pyqtSlot()
    def execute(self):
        if self.m_numbers is None:
            return
        try:
            i = next(self.m_numbers)
        except StopIteration:
            return
        else:
            self.webView.page().mainFrame().evaluateJavaScript(
                'document.getElementById("content").innerHTML = "{}";'.format(i)
            )
            QtCore.QTimer.singleShot(1000, self.m_worker.task)


if __name__ == "__main__":
    html = """<html>
    <body>
        <div id="content"></div>
        <button onClick="pyObj.example()">start</button>
    </body>
</html>"""

    app = QtWidgets.QApplication(sys.argv)

    view = QtWebKitWidgets.QWebView()
    obj = ExampleClass(view)
    view.page().mainFrame().addToJavaScriptWindowObject("pyObj", obj)
    view.setHtml(html)
    view.resize(640, 480)
    view.show()
    sys.exit(app.exec_())