Question

我只是希望每second我使用vue.js放入_.throttle()中的第二个参数时得到高度值，但不起作用：（

这是我的vue代码：

import underscore from 'underscore';

export default {
    data() {
        return {
            progress: 0,
            height: 0,
            scroll: 0
        }
    },

    created() {
        window.addEventListener('scroll', _.throttle(this.handleScroll, 300));
    },

    methods: {
        /**
         * Handle the scroll.
         */
        handleScroll() {
            this.height = _.throttle(document.getElementById('tags-module').offsetTop, 300);
            this.scroll = window.scrollY;

            this.progress = Math.floor((this.scroll/this.height)*100);
        }
    }
}

采用handleScroll()方法，this.height我使用了油门，但无法获得height值。如果我删除throttle，工作正常。

请告诉我我的错误在哪里。

Answer 1

试试这个。

methods:{
    handleScroll: _.throttle(function(){
        this.scroll = window.scrollY;
        this.progress = Math.floor((this.scroll/this.height)*100);
    }, 300),
    updateHeight: _.throttle(function(){
        this.height = document.getElementById('tags-module').offsetTop;
    }, 1000)

},
created(){
    window.addEventListener('scroll', () => {
        this.updateHeight();
        this.handleScroll();
    });
}

Answer 2

鉴于handleScroll方法已被限制，您不需要第二个方法。但是，如果您希望保留它，则需要返回值：

this.height = _.throttle(
  () => document.getElementById('tags-module').offsetTop,
  300
)()

来自the manual：

创建并返回传递函数的新的受限制版本，当重复调用时，每隔等待毫秒最多只调用一次原始函数。对于速度限制事件非常有用，这些事件的发生速度比您能跟上的速度要快。

无法使用下划线油门Vue.js获取高度值

2 个答案: