下面展示一些 内联代码片
。
<template>
<div class="hello">
</div>
</template>
<script>
// import func from '../../vue-temp/vue-editor-bridge'
// throttle 在某个时间段,无论触发多少次,我只认第一次
// 防抖 在某个时间段,无论触发多少次,我只认最后一次
export default {
name: 'HelloWorld',
data () {
return {
inputval: ''
}
},
mounted() {
// window.addEventListener('scroll',this.throttle(this.scroll,5000))
// window.addEventListener('scroll',this.debouncing(this.scroll,2000))
window.addEventListener('scroll',this.betterDebounce(this.scroll,2000))
},
methods:{
inputBtn () {
// this.throttle(this.inputV,1000)
},
inputV() {
console.log(this.inputval)
},
// 节流
throttle (fn,intrval) {
// fn 回调函数,intrval:计时器
let last = 0
return function() {
// 保存上下文
let content = this
// 参数
let args = arguments
let now = +new Date()
if((now - last) > intrval) {
last = now
// console.log(1)
// this.scroll()
fn.apply(content,args)
}
}
},
// 防抖 如果一直滑动就会一直重启
debouncing(fn,delay){
let time = null
return function(params) {
// 保存上下文
let content = this
// 参数
let args = arguments
// 如果定时器启动就关闭计时器,重新启动定时器
if(time) {
clearTimeout(time)
}
time = setTimeout(() => {
fn.apply(content,args)
},delay)
}
},
// 防抖+ 节流 超过指定时间必须执行
betterDebounce (fn,delay) {
let last =0
let time = null
// debugger
return function () {
// 保存上下文
let content = this
// 参数
let args = arguments
let now = +new Date()
if((now-last ) < delay) {
clearTimeout(time)
time = setTimeout(() => {
fn.apply(content,args)
last = now
},delay)
} else {
last = now
fn.apply(content,args)
}
}
},
scroll () {
console.log('滚动起来了...')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
height: 20000px;
background-color: pink;
}
</style>
<template>
<div class="hello">
<input type="text" v-model="inputval" @input="inputBtn">
</div>
</template>
<script>
// import func from '../../vue-temp/vue-editor-bridge'
// throttle 在某个时间段,无论触发多少次,我只认第一次
// 防抖 在某个时间段,无论触发多少次,我只认最后一次
function debounce(func, intrval=1000){ //可以放入项目中的公共方法中进行调用(鹅只是省事)
// fn 回调函数,intrval:计时器
let last = 0
return function() {
// 保存上下文
let content = this
// 参数
let args = arguments
let now = +new Date()
if((now - last) > intrval) {
last = now
// console.log(1)
// this.scroll()
func.apply(content,args)
}
}
}
export default {
name: 'HelloWorld',
data () {
return {
inputval: ''
}
},
mounted() {
// window.addEventListener('scroll',this.throttle(this.scroll,5000))
// window.addEventListener('scroll',this.debouncing(this.scroll,2000))
// window.addEventListener('scroll',this.betterDebounce(this.scroll,2000))
},
methods:{
// inputBtn () {
// this.throttle(this.inputV,1000)
// },
inputBtn:debounce(function(e){
console.log(this.inputval)
}),
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
height: 20000px;
background-color: pink;
}
</style>
本文地址:https://blog.csdn.net/weixin_44952708/article/details/107314411
如对本文有疑问, 点击进行留言回复!!
蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解
keepalived+haproxy+mycat+mysql高可用搭建配制
vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题
网友评论