Ionaru / Ionaru/easy-markdown-editor

Timeout built in to previewRender asynchronous

Open
#146 1 comment 2 reactions 0 assignees View on GitHub
Improvement
Dominant language
JavaScript
Stars
3.1k
Forks
363
PR merge metrics
No merged PRs in 30d

Description

**Is your feature request related to a problem? Please describe.**
If using ajax calls in the asynchronous `previewRender`, a call is made on every change event, which there will be many.

**Describe the solution you'd like**
Implement a third, optional, parameter to the asynchronous method which will allow it to only be called every X milliseconds
```js
previewRender: function(plainText, preview, timeout) { // Async method
preview.innerHTML = ajaxParser(plainText);
},
```

**Describe alternatives you've considered**
I'm currently using the following
```js
//underscore.js's debounce function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
);
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
);
}

function ajaxRenderer(plainText, preview) {
$.ajax({
url: './path/to/my/Renderer.php', //using [Parsedown](https://github.com/erusev/parsedown) and a simple $_REQUEST, render, echo script
method: 'POST'
data: {plainText}.
timeout: 2000
})
.then(function(data) {
preview.innerHTML = data;
});
}

var debouncedRenderer = debounce(ajaxRender,1000,false);

...
//below within EasyMDE declaration
previewRender: function(plainText, preview) {
debouncedRenderer(plainText,preview);
}
```

by doing this, the ajax function gets called once per second at the most, however the initial render has a 1 second delay. If I set the third param of the debouncedRenderer to true, the render occurs immedietly but if multiple changes occur in the same second, the first gets sent to the ajax request rather than the last, another event must occur after 1 second, which is a very awkward user interaction,

Ideally the first render could happen synchronously on opening the preview, and the rest occur in a de bounced fashion.

**Additional context**
I appreciate that the asynchronous function was fixed from SimpleMDE! back then it would flash 'undefined' while the call was being made every time

Thanks for your help!!

Contributor guide

Open the contributing guide

Research direction

Start at the asynchronous previewRender implementation and its existing preview update path. Verify that the initial preview renders immediately, while later changes are limited to one call per configured interval and use the latest input; add or update coverage for these timing cases if the project has tests for preview rendering.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.