Ionaru / Ionaru/easy-markdown-editor
Timeout built in to previewRender asynchronous
- 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
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