【问题标题】:How to debounce an event? (wrong Syntax?)如何对事件进行去抖动? (错误的语法?)
【发布时间】:2015-06-24 04:21:39
【问题描述】:

我有点困惑。我想在 windows-resize 上对函数 resizeAd 进行去抖动。 我玩过这段代码,但没有任何结果。去抖没有完成。 在这种情况下我必须如何调用去抖动功能?

去抖函数可以通过这样调用它们来正常工作:var resizeIframeAd = debounce(function() {... }

    (function(window, document, undefined) {
        'use strict';
        /*
         * Global api.
         */
        var adTech = window.adTech = {
            get: function() {
                return _instance;
            },
            //Main entry point.
            init: function(options) {
                return _instance || new ADTECH(options);
            }
        };
        /**
         * Constructor.
         */
        var ADTECH = function(options) {
            var defaultOptions = {
              adID : '5202402',
              hiddenClassName : 'hidden'
            };
            this.options = this.extend(options, defaultOptions);

            this.makeAd();
            _instance = this;
            return _instance;
        }


     ADTECH.prototype = {
        extend: function(source, target) {
          if (source == null) { return target; }
          for (var k in source) {
            if(source[k] != null && target[k] !== source[k]) {
              target[k] = source[k];
            }
          }
          return target;
        },
        log: function(msg){
          if(window.console){
            console.log(msg);
          }
        },
         // Debounce function
        debounce:  function(func, wait, immediate) {
          var timeout;
          return function() {
              var context = this, args = arguments;
              var later = function() {
                  timeout = null;
                  if (!immediate) func.apply(context, args);
              };
              var callNow = immediate && !timeout;
              clearTimeout(timeout);
              timeout = setTimeout(later, wait);
              if (callNow) func.apply(context, args);
          };
        },
        // event Handler
        addEvent: function (elem, type, eventHandle) {     console.log("adEvent is undefined: ",eventHandle);
            if (elem == null || typeof(elem) == 'undefined') return;
            if (elem.addEventListener) {
                elem.addEventListener(type, eventHandle, false);
            } else if (elem.attachEvent) {
            elem.attachEvent("on" + type, eventHandle);
            } else {
                elem["on" + type] = eventHandle;
            }
        },

//to debounce this fucntion I call them like this var resizeIframeAd = debounce(function() {    HOW TO DO THAT HERE?


        resizeAd: function(invokeLater) {
            // this is explicitly set based on the calling object.
            var obj = this;
            var helper = function () {
               obj.log("resizeAd2 done.");
               //var ad = document.getElementById(obj.options.adID);    //obj.log(ad);
               obj.debounce(function() {
                   console.log("please debounce this function");
               }, 250)
            };
            // if invokeLater is a falsey value do the resizing right away
            // if it is truthy return helper so that it can be assigned as
            // an event handler
            return invokeLater ? helper : helper();
        },
        // insert ad
        makeAd: function () {
                    this.addEvent(window, "resize", this.resizeAd(true));
        }

     }
        // Singleton
        var _instance;
    }(window, document));


    var API = adTech.init();

【问题讨论】:

  • 你从哪里得到这个debounce 方法?你自己写的吗?
  • obj.debounce(function() { console.log("please debounce this function"); }, 250) 到底应该做什么?这是从哪里调用的?
  • 去抖动正在延迟命名函数。这里是 250 毫秒。它在这里被调用:this.addEvent(window, "resize", this.resizeAd(true));
  • 嗯,以你使用它的方式,它延迟了从未在任何地方调用过的未命名function() { console.log("please debounce this function"); }

标签: javascript jquery syntax prototype debouncing


【解决方案1】:

我想你想去抖动你的 helper 函数:

var helper = this.debounce(function () {
   obj.log("resizeAd2 done.");
   //var ad = document.getElementById(obj.options.adID);    //obj.log(ad);
   console.log("please debounce this function");
}, 250);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-04-12
    • 1970-01-01
    • 2019-01-18
    • 2016-07-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多