具有 Underscore.js 去抖器的 onresize 函数 - .on() 和 .off() 具有 Window 宽度 [Enquire.js]

Question

下面的代码片段仅在 window 宽度超过 375 像素时模仿 vw（视口宽度）字体大小。

当 window 宽度低于 375px 时，

jQuery 关闭 resize.mymethod。

/* This's a plugin imitating vw (viewport width) */

function SupportVhVw() {

  this.setVw = function(name, vw) {

    jQuery(window).on( "resize.mymethod",( function(event) {
        scaleVw(name, vw);
    }));

    scaleVw(name, vw);
  }

  var scaleVw = function(name, vw) {

    var scrWidth = jQuery(document).width();
    var px = (scrWidth * vw) / 100;
    var fontSize = jQuery(name).css( 'font-size', px + "px" );
}

};




/* When window width is above 374px, it uses the viewport width plugin for font sizes. */
/* When window width is below 375px, enquire.js turns off the viewport width plugin completely. */

enquire.register("(min-width:375px)", {
    match : function() {
      // Init object
      var supportVhVw = new SupportVhVw();
      supportVhVw.setVw(".title", 2.9);
      supportVhVw.setVw(".subtitle", 2.2);
      supportVhVw.setVw(".vwLargerWindow-p", 1.79);

    }, 
    unmatch : function() {
      $(window).off("resize.mymethod");
    }
});

div {
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.10.2/underscore-min.js"></script>


<div>
  <h1 class="title">Javascript imitates vw font sizing.</h1>
  <p class="subtitle">Change this window's width to see the font size change.</p>
  <p class="vwLargerWindow-p">Lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div>

代码片段工作正常，但我希望 underscore.js 去抖器与“resize.mymethod”一起使用。“

”

我试过这个：jQuery(window).on( "resize.mymethod", _.debounce( function(event) { scaleVw(name, vw); }, 250));

但它不起作用，可能是因为它在“resize”之后有“mymethod”。

Answer 1

您正在为每次调整大小创建一个新的 _.debounce()。

创建一次去抖动然后传递给它的引用

var myDebouncedFunction = _.debounce( function(event) { scaleVw(name, vw); }, 250)
jQuery(window).on( "resize.mymethod", myDebouncedFunction);

具有 Underscore.js 去抖器的 onresize 函数 - .on() 和 .off() 具有 Window 宽度 [Enquire.js]

onresize functions with Underscore.js debouncer - .on() and .off() with Window Widths [Enquire.js]

html

javascript

jquery

underscore.js

debounce