vue 函数节流中匿名函数问题

发布于 2022-09-07 11:26:21 字数 694 浏览 18 评论 0

问题
这是原生版函数节流方法:匿名函数

(注: return function(){}methods中不能执行)

请问, 怎么将其改成vue版呢?

由于在滚动和中文搜索框中十分常用,请教

贴代码:

created(){
    window.addEventListener('scroll', () => {
        this.debounce()(this._log, 1000);
    }
},
methods: {
    debounce (fn, idle) {
      let setTm;
      console.log('debounce')
      if (!idle || idle <= 0) return fn;
      return function () {
        clearTimeout(setTm);
        setTm = setTimeout(fn.bind(this, ...arguments), idle);
      }
    },
    _log(){
        console.log('_log')
    },
    
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

吹泡泡o 2022-09-14 11:26:21

绑定的方式应该是:

 window.addEventListener('scroll', 
       this.debounce(this._log, 1000));

看下fiddle

转身以后 2022-09-14 11:26:21
var throttle = (fun, wait = 5000) => {
    var last = 0;
    return function () {
        var args = arguments;
        var ctx = this;
        var now = Date.now();
        if (now - last >= wait) {
            last = now;
            return fun.apply(ctx, args);
        }
        console.log(`上一个周期未执行完毕`)
    }
}

export default {
    name: 'VueComponent',
    methods: {
        scroll: throttle(function () {
            //...
        })
    }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文