编辑1

Question

如何运行＆＃34;调整大小＆＃34;以下脚本中的JavaScript事件。基本上我喜欢这样做如果我调整窗口大小。

        classie.remove( bodyEl, 'show-menu' );
        classie.remove( bodyEl, 'noscroll' );
        classie.remove( htmlEl, 'noscroll' );

以下是完整的脚本：

https://jsfiddle.net/sz5rxw2a/

Answer 1

这实际上不是一个好主意，但这将是你的代码

window.onresize = function(){
    classie.remove( bodyEl, 'show-menu' );
    classie.remove( bodyEl, 'noscroll' );
    classie.remove( htmlEl, 'noscroll' );  
}

编辑1

最好使用debouncing function来限制函数触发的频率。我建议将addEventListener功能用于这些目的，具有以下配置：

function debounce(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);
    };
}; 

var throttled_resize = debounce(function() {
    classie.remove( bodyEl, 'show-menu' );
    classie.remove( bodyEl, 'noscroll' );
    classie.remove( htmlEl, 'noscroll' );
}, 250);

window.addEventListener('resize', throttled_resize);

后者的表现更为出色。快乐的编码！

Answer 2

我建议你这样做

通过调整预设超时值66（ms），您可以选择实际事件触发和执行自定义功能的频率。

(function(timeout) {     // make a local static var - timeout

  window.addEventListener("resize", function(e) {
    if ( !timeout ) {
      timeout = setTimeout(function() {
        timeout = null;
        actualResizeHandler(e);

        // Set the actual fire rate
      }, 66);
    }
  }, false);

  function actualResizeHandler(e) {
    // handle the resize event

    classie.remove( bodyEl, 'show-menu' );
    classie.remove( bodyEl, 'noscroll' );
    classie.remove( htmlEl, 'noscroll' );

  }

}());

Src：https://developer.mozilla.org/en-US/docs/Web/Events/resize

如何运行窗口调整大小功能？

2 个答案:

编辑1