vue 节流 

<!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>
View Code

扩展：

更为常见用法： 新建一个模块（定时器，状态值： 点击立马执行 - 执行定时器 - 根据状态值 判断是否执行传入函数）

浅谈VUE防抖与节流的最佳解决方案(函数式组件)

VUE+Element UI实现表格内直接编辑

posted @ 2019-08-01 23:00  justSmile2  阅读(273)  评论(0)  编辑  收藏  举报
喵