vue div点击事件_如何使用vue写节流函数？

什么是节流函数？

        函数节流(throttle)，指的是某个函数在一定时间间隔内(例如 3 秒)只执行一次，在这 3 秒内产生函数调用请求直接无视，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视新的函数调用请求，以此类推。

节流函数的使用场景

        频繁的调用dom或者加载资源等行为，比如：点击事件，滚动页面等。这些行为会频繁的触发事件，消耗资源，而节流函数可以阻断这种行为。

如何实现节流函数?

第1步先创建一个vue实例

<div id="app">      <div>内容div>div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>            new Vue({        el:"#app",        methods:{          fn(){            return function(){              console.log(111)            }          }        }      })script>

第2步，使用vue添加一个全局自定义指令

<div id="app">      <div v-throttle:click="[fn(),3000]">内容div>div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>      Vue.directive("throttle",{        bind(el,binding){          console.log(el)          console.log(binding)        }      })            new Vue({        el:"#app",        methods:{          fn(){            return function(){              console.log(111)            }          }        }      })script>

bind是自定义指令的生命周期函数，意思是插入指令的时候触发，里面提供了两个参数，一个是el，一个是binding。el是绑定指令的元素，binding是指令里面的值。

第3步，写一个节流函数

<div id="app">      <div v-throttle:click="[fn(),3000]">内容div>    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>      Vue.directive("throttle",{        bind(el,binding){                    let throttle = function(cb,time){//节流函数            let oldTime = 0            return function(){              let nowTime = +new Date()              if(nowTime - oldTime >= time){                oldTime = nowTime                cb.apply(this,arguments)//回调              }            }          }        }      })            new Vue({        el:"#app",        methods:{          fn(){            return function(){              console.log(111)            }          }        }      })script>

思路是每次点击，用现在的时间和上一次点击的时间做比较，如果大于传入的时间，则执行传入的代码，否则不执行。

最后，给元素绑定一个事件监听即可使用

<div id="app">      <div v-throttle:click="[fn(),3000]">内容div>div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>      Vue.directive("throttle",{        bind(el,binding){          let type = binding.arg//事件的类型          let fn = binding.value[0]//要传入的函数          let time = binding.value[1] || 3000//时间，没有就默认3秒触发                    let throttle = function(cb,time){//节流函数            let oldTime = 0            return function(){              let nowTime = +new Date()              if(nowTime - oldTime >= time){                oldTime = nowTime                cb.apply(this,arguments)//回调              }            }          }                    el.addEventListener(type,throttle(fn,time))//事件监听        }      })            new Vue({        el:"#app",        methods:{          fn(){            return function(){              console.log(111)            }          }        }      })script>

好了，这就是这期节流函数的全部内容。