Category Archives: General

How To – Debounce function in Vue Class Component

I want to validate an input textbox. When users enter anything in the textbox, it will validate and show error message according to the result.

I need to use Debounce here to reduce validation rate.

validateText = _.debounce(() => {
    if (
        this.input.passwordConfirmation.length > 0 &&
        this.input.password !== this.input.passwordConfirmation
    ) {
        this.isPasswordSame = false;
    } else {
        this.isPasswordSame = true;
    }
    console.log('Same: ' + this.isPasswordSame);
    console.log('Valid: ' + this.isPasswordValid);
}, 500);

Then I bind this function to onChange.


Finally, I bind the validation result to a div for error message.

Password and confirmed password is not the same

… WTH …. it does not work.

The reason is that Vue does not work well with arrow function () =>.
So we need to make sure that scope of

this.isPasswordSame

is correct.

Let’s make a simple modification like this.
First declare a validator function as methods. Then pass that function to debounce.

validator() {
    if (
        this.input.passwordConfirmation.length > 0 &&
        this.input.password !== this.input.passwordConfirmation
    ) {
        this.isPasswordSame = false;
    } else {
        this.isPasswordSame = true;
    }

    if (this.input.password.length < 8) {
        this.isPasswordValid = false;
    } else {
        this.isPasswordValid = true;
    }
    console.log('Same: ' + this.isPasswordSame);
    console.log('Valid: ' + this.isPasswordValid);
}

validateText = _.debounce(this.validator, 500);

It works !!!

ไม่ต้องกลัวลืม Shortcut key อีกต่อไป, มาเพิ่ม Menu ให้ Sublime กันเถ๊อะ

บัวบานใช้ Sublime บ้างในบางโอกาส. และประสบปัญหาอย่างแรง เวลาจะเรียกใช้ plugin แต่จำ shortcut key ไม่ได้! ต้อง google ทุกครั้งไป. น่าเบื่อ!

วันนี้ขอจบปัญหานี้อย่างถาวร ด้วยการเพิ่มเมนูเข้าไปให้ Sublime เลย. จะขอยกตัวอย่าง Plugin  Pretty JSON ซึ่งมีหน้าที่จัดเว้นวรรค เว้นบรรทัด ให้ JSON อ่านง่ายขึ้นนะฮะ.

Install Plugin

  1. กด Preferences > Package Control

  2. เลือก Package Control: Install package
  3. พิมพ์ “Pretty JSON” แล้วกด Enter

หลังจากที่มันลงเสร็จแล้วเราจะเห็น package นั้นบนเครื่องเรา.
Windows: %userprofile%\AppData\Roaming\Sublime Text 3\Packages\Pretty JSON
Mac: /Users/your-user/Library/Application Support/Sublime Text 3/Packages/Pretty JSON

 

Add a Menu

ณ จุดนี้ เราจะเพิ่มเมนู “PrettyPrint” และภายใต้นั้นเราจะใส่ “Pretty JSON” เอาไว้.

  1. เปิดไฟล์ Main.sublime-menu
  2. เพิ่ม object เข้าไปดังบรรทัดที่ 38-48
    [
        {
            "mnemonic": "n",
            "caption": "Preferences",
            "id": "preferences",
            "children": [
                {
                    "mnemonic": "P",
                    "caption": "Package Settings",
                    "id": "package-settings",
                    "children": [
                        {
                            "caption": "Pretty JSON",
                            "children": [
                                {
                                    "caption": "Settings – Default",
                                    "args": {
                                        "file": "${packages}/Pretty JSON/Pretty JSON.sublime-settings"
                                    },
                                    "command": "open_file"
                                },
                                {
                                    "caption": "Settings – User",
                                    "args": {
                                        "file": "${packages}/User/Pretty JSON.sublime-settings"
                                    },
                                    "command": "open_file"
                                },
                                {
                                    "caption": "-"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "caption": "PrettyPrint",
            "mnemonic": "p",
            "id": "prettyJson",
            "children": [
                {
                    "command": "pretty_json",
                    "caption": "Pretty JSON"
                }
            ]
        }
    ]
    
  3. Save file และ Restart Sublime. จะเห็น Menu โผล่มา พร้อมกดใช้ได้เลยนะฮะ.