<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" @input="debounceInput($event)"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let timeout = null function debounce(fn, wait) { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn, wait) } new Vue({ el:'#app', methods: { debounceInput(E){ debounce(() => { console.log(E.target.value) }, 1000) } } }) </script> </body> </html>
扩展：
更为常见用法： 新建一个模块（定时器，状态值： 点击立马执行 - 执行定时器 - 根据状态值 判断是否执行传入函数）