Make setTimeout asynchronous and add clearTimeout (#1146)

docEdub · web-flow · commit d414bcf72638 · 2022-10-17T16:49:13.000-04:00
The current implementation of `setTimeout` dispatches repeatedly until the given delay is reached. This causes performance issues.

This change improves performance by implementing `setTimeout` asynchronously on a separate thread.

The `clearTimeout` function is currently not implemented and since it is closely related to `setTimeout`, it makes sense to implement it in this change, too.
diff --git a/Apps/UnitTests/Apple/App.mm b/Apps/UnitTests/Apple/App.mm
@@ -1,4 +1,4 @@
-#include "../Shared/Tests.cpp"
+#include "../Shared/Tests.h"
 
 int main() {
     Babylon::Graphics::DeviceConfiguration graphicsConfig{};
diff --git a/Apps/UnitTests/CMakeLists.txt b/Apps/UnitTests/CMakeLists.txt
@@ -14,6 +14,9 @@ set(NPM_SCRIPTS
     "../node_modules/chai/chai.js"
     "../node_modules/mocha/mocha.js")
 
+set(HEADERS
+    "Shared/Tests.h")
+
 set(ADDITIONAL_LIBRARIES "")
 
 if(APPLE)
@@ -26,7 +29,7 @@ elseif(WIN32)
     set(TEST_APP "Win32/App.cpp")
 endif()
 
-add_executable(UnitTests ${LOCAL_SCRIPTS} ${NPM_SCRIPTS} ${TEST_APP})
+add_executable(UnitTests ${LOCAL_SCRIPTS} ${NPM_SCRIPTS} ${TEST_APP} ${HEADERS})
 
 target_link_to_dependencies(UnitTests
     UrlLib
diff --git a/Apps/UnitTests/Scripts/tests.js b/Apps/UnitTests/Scripts/tests.js
@@ -327,6 +327,119 @@ describe("PostProcesses", function() {
     });*/
 })
 
+describe("setTimeout", function () {
+    this.timeout(1000);
+    it("should return an id greater than zero", function () {
+        const id = setTimeout(() => { }, 0);
+        expect(id).to.be.greaterThan(0);
+    });
+    it("should return an id greater than zero when given an undefined function", function () {
+        const id = setTimeout(undefined, 0);
+        expect(id).to.be.greaterThan(0);
+    });
+    it("should call the given function after the given delay", function (done) {
+        const startTime = new Date().getTime();
+        setTimeout(() => {
+            try {
+                expect(new Date().getTime() - startTime).to.be.at.least(10);
+                done();
+            }
+            catch (e) {
+                done(e);
+            }
+        }, 10);
+    });
+    it("should call the given nested function after the given delay", function (done) {
+        const startTime = new Date().getTime();
+        setTimeout(() => {
+            setTimeout(() => {
+                try {
+                    expect(new Date().getTime() - startTime).to.be.at.least(20);
+                    done();
+                }
+                catch (e) {
+                    done(e);
+                }
+            }, 10);
+        }, 10);
+    });
+    it("should call the given function after the given delay when the delay is a string representing a valid number", function (done) {
+        const startTime = new Date().getTime();
+        setTimeout(() => {
+            try {
+                expect(new Date().getTime() - startTime).to.be.at.least(10);
+                done();
+            }
+            catch (e) {
+                done(e);
+            }
+        }, "10");
+    });
+    it("should call the given function after zero milliseconds when the delay is a string representing an invalid number", function (done) {
+        setTimeout(() => {
+            done();
+        }, "a");
+    });
+    it("should call the given function after other tasks execute when the given delay is zero", function (done) {
+        let trailingCodeExecuted = false;
+        setTimeout(() => {
+            try {
+                expect(trailingCodeExecuted).to.be.true;
+                done();
+            }
+            catch (e) {
+                done(e);
+            }
+         }, 0);
+        trailingCodeExecuted = true;
+    });
+    it("should call the given function after other tasks execute when the given delay is undefined", function (done) {
+        let trailingCodeExecuted = false;
+        setTimeout(() => {
+            try {
+                expect(trailingCodeExecuted).to.be.true;
+                done();
+            }
+            catch (e) {
+                done(e);
+            }
+         }, undefined);
+        trailingCodeExecuted = true;
+    });
+    it("should call the given functions in the correct order", function (done) {
+        const called = [];
+        for (let i = 9; i >= 0; i--) {
+            setTimeout(() => {
+                called.push(i * 2);
+                if (called.length === 10) {
+                    try {
+                        expect(called).to.deep.equal([0, 2, 4, 6, 8, 10, 12, 14, 16, 18]);
+                        done();
+                    }
+                    catch (e) {
+                        done(e);
+                    }
+                }
+            }, i * 2);
+        }
+    });
+})
+
+describe("clearTimeout", function () {
+    this.timeout(0);
+    it("should stop the timeout matching the given timeout id", function (done) {
+        const id = setTimeout(() => {
+            done(new Error("Timeout was not cleared"));
+        }, 0);
+        clearTimeout(id);
+        setTimeout(done, 100);
+    });
+    it("should do nothing if the given timeout id is undefined", function (done) {
+        setTimeout(() => { done(); }, 0);
+        clearTimeout(undefined);
+    });
+})
+
 mocha.run(failures => {
     // Test program will wait for code to be set before exiting
     if (failures > 0) {
diff --git a/Apps/UnitTests/Shared/Tests.h b/Apps/UnitTests/Shared/Tests.h
@@ -48,7 +48,6 @@ int Run(std::unique_ptr<Babylon::Graphics::Device> device)
     });
     Babylon::ScriptLoader loader{*runtime};
     loader.Eval("global = {};", ""); // Required for Chai.js as we do not have global in Babylon Native
-    loader.Eval("window.clearTimeout = () => {};", ""); // TODO: implement clear timeout, required for Mocha timeouts to work correctly
     loader.Eval("location = {href: ''};", "");          // Required for Mocha.js as we do not have a location in Babylon Native
     loader.LoadScript("app:///Scripts/babylon.max.js");
     loader.LoadScript("app:///Scripts/babylonjs.materials.js");
diff --git a/Apps/UnitTests/Win32/App.cpp b/Apps/UnitTests/Win32/App.cpp
@@ -1,4 +1,4 @@
-#include "../Shared/Tests.cpp"
+#include "../Shared/Tests.h"
 
 LRESULT WINAPI WndProc(HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam)
 {
diff --git a/Apps/UnitTests/X11/App.cpp b/Apps/UnitTests/X11/App.cpp
@@ -3,7 +3,7 @@
 #include <X11/Xlib.h> // will include X11 which #defines None... Don't mess with order of includes.
 #include <X11/Xutil.h>
 #undef None
-#include "../Shared/Tests.cpp"
+#include "../Shared/Tests.h"
 
 namespace
 {
diff --git a/Polyfills/Window/CMakeLists.txt b/Polyfills/Window/CMakeLists.txt
@@ -1,5 +1,7 @@
 set(SOURCES
     "Include/Babylon/Polyfills/Window.h"
+    "Source/TimeoutDispatcher.h"
+    "Source/TimeoutDispatcher.cpp"
     "Source/Window.h"
     "Source/Window.cpp")
 
diff --git a/Polyfills/Window/Source/TimeoutDispatcher.cpp b/Polyfills/Window/Source/TimeoutDispatcher.cpp
@@ -0,0 +1,165 @@
+#include "TimeoutDispatcher.h"
+
+#include <cassert>
+
+namespace Babylon::Polyfills::Internal
+{
+    namespace
+    {
+        using TimePoint = std::chrono::time_point<std::chrono::steady_clock, std::chrono::microseconds>;
+
+        TimePoint Now()
+        {
+            return std::chrono::time_point_cast<std::chrono::microseconds, std::chrono::steady_clock>(std::chrono::steady_clock::now());
+        }
+    }
+
+    struct TimeoutDispatcher::Timeout
+    {
+        TimeoutId id;
+
+        // Make this non-shared when JsRuntime::Dispatch supports it.
+        std::shared_ptr<Napi::FunctionReference> function;
+
+        TimePoint time;
+
+        Timeout(TimeoutId id, std::shared_ptr<Napi::FunctionReference> function, TimePoint time)
+            : id{id}
+            , function{std::move(function)}
+            , time{time}
+        {
+        }
+
+        Timeout(const Timeout&) = delete;
+        Timeout(Timeout&&) = delete;
+    };
+
+    TimeoutDispatcher::TimeoutDispatcher(Babylon::JsRuntime& runtime)
+        : m_runtime{runtime}
+        , m_thread{std::thread{&TimeoutDispatcher::ThreadFunction, this}}
+    {
+    }
+
+    TimeoutDispatcher::~TimeoutDispatcher()
+    {
+        {
+            std::unique_lock<std::mutex> lk{m_mutex};
+            m_idMap.clear();
+            m_timeMap.clear();
+        }
+
+        m_shutdown = true;
+        m_condVariable.notify_one();
+        m_thread.join();
+    }
+
+    TimeoutDispatcher::TimeoutId TimeoutDispatcher::Dispatch(std::shared_ptr<Napi::FunctionReference> function, std::chrono::milliseconds delay)
+    {
+        if (delay.count() < 0)
+        {
+            delay = std::chrono::milliseconds{0};
+        }
+
+        std::unique_lock<std::mutex> lk{m_mutex};
+
+        const auto id = NextTimeoutId();
+        const auto earliestTime = m_timeMap.empty() ? TimePoint::max()
+                                                    : m_timeMap.cbegin()->second->time;
+        const auto time = Now() + delay;
+        const auto result = m_idMap.insert({id, std::make_unique<Timeout>(id, std::move(function), time)});
+        m_timeMap.insert({time, result.first->second.get()});
+    
+        if (time <= earliestTime)
+        {
+            m_runtime.Dispatch([this](Napi::Env) {
+                m_condVariable.notify_one();
+            });
+        }
+
+        return id;
+    }
+
+    void TimeoutDispatcher::Clear(TimeoutId id)
+    {
+        std::unique_lock<std::mutex> lk{m_mutex};
+        const auto itId = m_idMap.find(id);
+        if (itId != m_idMap.end())
+        {
+            const auto& timeout = itId->second;
+            const auto timeRange = m_timeMap.equal_range(timeout->time);
+
+            assert(timeRange.first != m_timeMap.end() && "m_idMap and m_timeMap are out of sync");
+
+            for (auto itTime = timeRange.first; itTime != timeRange.second; itTime++)
+            {
+                if (itTime->second->id == id)
+                {
+                    m_timeMap.erase(itTime);
+                    break;
+                }
+            }
+
+            m_idMap.erase(itId);
+        }
+    }
+
+    TimeoutDispatcher::TimeoutId TimeoutDispatcher::NextTimeoutId()
+    {
+        while (true)
+        {
+            ++m_lastTimeoutId;
+
+            if (m_lastTimeoutId <= 0)
+            {
+                m_lastTimeoutId = 1;
+            }
+
+            if (m_idMap.find(m_lastTimeoutId) == m_idMap.end())
+            {
+                return m_lastTimeoutId;
+            }
+        }
+    }
+
+    void TimeoutDispatcher::ThreadFunction()
+    {
+        while (!m_shutdown)
+        {
+            std::unique_lock<std::mutex> lk{m_mutex};
+            TimePoint nextTimePoint{};
+
+            while (!m_timeMap.empty())
+            {
+                nextTimePoint = m_timeMap.begin()->second->time;
+                if (nextTimePoint <= Now())
+                {
+                    break;
+                }
+
+                m_condVariable.wait_until(lk, nextTimePoint);
+            }
+
+            while (!m_timeMap.empty() && m_timeMap.begin()->second->time == nextTimePoint)
+            {
+                const auto* timeout = m_timeMap.begin()->second;
+                CallFunction(timeout->function);
+                m_timeMap.erase(m_timeMap.begin());
+                m_idMap.erase(timeout->id);
+            }
+
+            while (!m_shutdown && m_timeMap.empty())
+            {
+                m_condVariable.wait(lk);
+            }
+        }
+    }
+
+    void TimeoutDispatcher::CallFunction(std::shared_ptr<Napi::FunctionReference> function)
+    {
+        if (function)
+        {
+            m_runtime.Dispatch([function = std::move(function)](Napi::Env)
+                { function->Call({}); });
+        }
+    }
+}
diff --git a/Polyfills/Window/Source/TimeoutDispatcher.h b/Polyfills/Window/Source/TimeoutDispatcher.h
@@ -0,0 +1,44 @@
+#pragma once
+
+#include <Babylon/JsRuntime.h>
+#include <napi/napi.h>
+
+#include <atomic>
+#include <chrono>
+#include <condition_variable>
+#include <map>
+#include <unordered_map>
+#include <cstdint>
+#include <thread>
+
+namespace Babylon::Polyfills::Internal
+{
+    class TimeoutDispatcher
+    {
+        using TimeoutId = int32_t;
+        struct Timeout;
+
+    public:
+        TimeoutDispatcher(Babylon::JsRuntime& runtime);
+        ~TimeoutDispatcher();
+
+        TimeoutId Dispatch(std::shared_ptr<Napi::FunctionReference> function, std::chrono::milliseconds delay);
+        void Clear(TimeoutId id);
+
+    private:
+        using TimePoint = std::chrono::time_point<std::chrono::steady_clock, std::chrono::microseconds>;
+
+        TimeoutId NextTimeoutId();
+        void ThreadFunction();
+        void CallFunction(std::shared_ptr<Napi::FunctionReference> function);
+
+        Babylon::JsRuntime& m_runtime;
+        std::mutex m_mutex{};
+        std::condition_variable m_condVariable{};
+        TimeoutId m_lastTimeoutId{0};
+        std::unordered_map<TimeoutId, std::unique_ptr<Timeout>> m_idMap;
+        std::multimap<TimePoint, Timeout*> m_timeMap;
+        std::atomic<bool> m_shutdown{false};
+        std::thread m_thread;
+    };
+}
diff --git a/Polyfills/Window/Source/Window.cpp b/Polyfills/Window/Source/Window.cpp
diff --git a/Polyfills/Window/Source/Window.h b/Polyfills/Window/Source/Window.h

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-#include "../Shared/Tests.cpp"`
	`1`	`+#include "../Shared/Tests.h"`
`2`	`2`
`3`	`3`	`int main() {`
`4`	`4`	`Babylon::Graphics::DeviceConfiguration graphicsConfig{};`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`#include <X11/Xlib.h> // will include X11 which #defines None... Don't mess with order of includes.`
`4`	`4`	`#include <X11/Xutil.h>`
`5`	`5`	`#undef None`
`6`		`-#include "../Shared/Tests.cpp"`
	`6`	`+#include "../Shared/Tests.h"`
`7`	`7`
`8`	`8`	`namespace`
`9`	`9`	`{`