大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
js节流防抖的应用场景和在vue中如何实现节流防抖?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联公司专注于企业成都全网营销推广、网站重做改版、福州网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站制作、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为福州等各大城市提供网站开发制作服务。函数防抖(debounce):
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。
函数节流(throttle):
规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。
setTimeout内 this失效:
这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,这会使得this指向的是window对象,看下图 :
打了断点,在Console下输出 this 是Window对象,解决这个问题可以在setTimeout函数外面定义一个 that = this 就可以了,输出 that果然就是该组件的对象
看在vue中的实际代码:
1.输入框,输入最后一个字 2秒后执行(防抖:debounce):
html:
js:
debounce: function(){ let that = this if(timer){ clearTimeout(timer) } timer = setTimeout(function () { console.log('输入') timer = undefined; },2000) }