只检查一次浏览器宽度和触发事件

Question

我想检查我的 browser/window 宽度，当它低于 669px 时。
当低于 669px 时，我想触发一个函数只触发一次。
但是，每次我调整浏览器的大小小于 669px 时，为什么每次调整大小时功能都会继续触发。

如何在用户点击 669 像素以下时只触发一次事件？

这是我正在使用的代码：

const checkWindowWdith = () => {
    console.log(document.documentElement.clientWidth);
    if (document.documentElement.clientWidth < 669) {
        //DO SOMETHING HERE
    };
};


//HERE I AM WAIT FOR THE USER TO FINISH RESIZING
var doit;
window.onresize = function(){
    clearTimeout(doit);
    doit = setTimeout(checkWindowWdith, 100);
};

Answer 1

我认为你需要创建一个变量，如果事件已经开始，则设置为 false，如果他从未像这样开始，则设置为 true:

var firstStartEvent = true

const checkWindowWdith = () => {
    console.log(document.documentElement.clientWidth);
    if (document.documentElement.clientWidth < 669) {
        firstStartEvent = false;
        //DO SOMETHING HERE
    };
};


//HERE I AM WAIT FOR THE USER TO FINISH RESIZING
var doit;
window.onresize = function(){
    clearTimeout(doit);
    if (firstStartEvent) {
      doit = setTimeout(checkWindowWdith, 100);
    }
};

只检查一次浏览器宽度和触发事件

Check browser width and fire event only once

javascript

function

browser

resize

window-resize