Javascript Execute function after last change and a delay

Question

I have an inline text editor with react https://github.com/niuware/mui-rte and I want to save my data changed when stop write (or change any style) and a little 1 second delay.

This module have a onSave() method and an onChange method. onSave it's called with a button, and onChange on every change on this textbox (includint onmouseout). There are any function that it's called after last change on text?

I have something like this now, but it's not working, so it call the function on every change, not after last change and 1 second delay.

import React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MUIRichTextEditor from "mui-rte";
import InvertColorsIcon from "@mui/icons-material/InvertColors";

let state = false;

const save = (data) => {
  console.log(data);
};

const save2 = (data) => {
  setTimeout(() => {
    console.log(data);
  }, 1000);
};

const myTheme = createTheme({
  // Set up your custom MUI theme here
});

ReactDOM.render(
  <ThemeProvider theme={myTheme}>
    <MUIRichTextEditor
      label="Type something here..."
      onSave={save}
      onChange={save2}
      inlineToolbar={true}
      inlineToolbarControls={["bold", "italic", "my-style", "link"]}
      customControls={[
        {
          name: "my-style",
          icon: <InvertColorsIcon />,
          type: "inline",
          inlineStyle: {
            backgroundColor: "black",
            color: "white"
          }
        }
      ]}
    />
  </ThemeProvider>,
  document.getElementById("root")
);

Thanks for all

Are you trying to create a debounce function with the delay, so that it only saves after the user didn't press a new key after 1 second? As for the rest, you'll need a component around your current components that has a state. In that component you should update the state with the onChange and onSave handler. — Emiel Zuurbier
– Emiel Zuurbier, Commented Aug 1, 2022 at 10:51
Yes, and the same with any change in text, for example when change the style to bold — Albert Gamundi
– Albert Gamundi, Commented Aug 1, 2022 at 10:53
Hi all, there are any method for people see more my questions and answer me? :) — Albert Gamundi
– Albert Gamundi, Commented Aug 2, 2022 at 16:00

Emiel Zuurbier · Accepted Answer · 2022-08-02 20:16:15Z

You can create a basic debounce function. This function will set a timeout and will reset that timeout whenever it is called again.

Apply the debounce to your save2 function and see that it will only run after 1 second of inactivity.

import React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MUIRichTextEditor from "mui-rte";
import InvertColorsIcon from "@mui/icons-material/InvertColors";

const myTheme = createTheme({
  // Set up your custom MUI theme here
});

function debounce(callback, wait) {
  let timeout;

  return function(...args) {
    const later = () => {
      timeout = null;
      callback(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

const App = () => {
  const save = (data) => {
    console.log(data);
  };

  const save2 = debounce((data) => {
    console.log(data);
  }, 1000);

  return (
    <ThemeProvider theme={myTheme}>
      <MUIRichTextEditor
        label="Type something here..."
        onSave={save}
        onChange={save2}
        inlineToolbar={true}
        inlineToolbarControls={["bold", "italic", "my-style", "link"]}
        customControls={[
          {
            name: "my-style",
            icon: <InvertColorsIcon />,
            type: "inline",
            inlineStyle: {
              backgroundColor: "black",
              color: "white"
            }
          }
        ]}
      />
    </ThemeProvider>
  );
};

ReactDOM.render(
  <App/>, 
  document.getElementById("root")
);

Collectives™ on Stack Overflow

Javascript Execute function after last change and a delay

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related