Javascript 如何等待'；结束'；属于'；调整大小'；事件，然后才执行操作？

所以我现在用的是：

$(window).resize(function(){resizedw();});

---

但在调整大小的过程中，会多次调用此函数。是否可以在事件结束时捕获事件？

Internet Explorer提供了一个事件。其他浏览器会在您调整大小时多次触发调整大小事件

这里还有其他很好的答案，展示了如何使用setTimeout和lodash和下划线中的方法，因此我将提到Ben Alman的，它完成了您的目标

假设在调整大小后要触发此函数：

function onResize() {
  console.log("Resize just happened!");
};

油门示例
在下面的示例中，在调整窗口大小期间，

onResize（）

仅每250毫秒调用一次

$(window).resize( $.throttle( 250, onResize) );

去盎司示例
在下面的示例中，

onResize（）

仅在窗口大小调整操作结束时调用一次。这与@Mark在回答中给出的结果相同

$(window).resize( $.debounce( 250, onResize) );

---

Internet Explorer提供了一个事件。其他浏览器会在您调整大小时多次触发调整大小事件

这里还有其他很好的答案，展示了如何使用setTimeout和lodash和下划线中的方法，因此我将提到Ben Alman的，它完成了您的目标

假设在调整大小后要触发此函数：

function onResize() {
  console.log("Resize just happened!");
};

油门示例
在下面的示例中，在调整窗口大小期间，

onResize（）

仅每250毫秒调用一次

$(window).resize( $.throttle( 250, onResize) );

去盎司示例
在下面的示例中，

onResize（）

仅在窗口大小调整操作结束时调用一次。这与@Mark在回答中给出的结果相同

$(window).resize( $.debounce( 250, onResize) );

---

您可以使用

setTimeout（）

和

clearTimeout（）

---

对示例进行编码。

您可以使用设置超时（）和清除超时（）

---

编写示例。

就窗口管理器而言，每个调整大小事件都是它自己的消息，具有不同的开始和结束，因此从技术上讲，每次调整窗口大小时，它都是结束

话虽如此，也许你想为你的继续设置一个延迟

---

嗯，就窗口管理器而言，每个调整大小事件都是它自己的消息，具有不同的开始和结束，因此从技术上讲，每次调整窗口大小时，它都是结束

话虽如此，也许你想为你的继续设置一个延迟

---

我有幸得到以下建议：

以下是代码，您无需翻阅他的帖子链接和来源：

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

var-rtime；
var超时=false；
varδ=200；
$（窗口）。调整大小（函数（）{
rtime=新日期（）；
如果（超时===false）{
超时=真；
setTimeout（resizeend，delta）；
}
});
函数resizeend（）{
if（新日期（）-rtime

---

谢谢sime.vidas的代码

我很幸运地得到了以下建议：

以下是代码，您无需翻阅他的帖子链接和来源：

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

var-rtime；
var超时=false；
varδ=200；
$（窗口）。调整大小（函数（）{
rtime=新日期（）；
如果（超时===false）{
超时=真；
setTimeout（resizeend，delta）；
}
});
函数resizeend（）{
if（新日期（）-rtime

---

谢谢sime.vidas的代码

您可以将

设置超时（）

和

清除超时（）

与以下各项结合使用：

更新

我编写了一个扩展来增强jQuery在（&

bind

）事件处理程序上的默认

。如果在给定的时间间隔内未触发事件，它会将一个或多个事件的事件处理程序函数附加到选定元素。如果您希望仅在延迟后启动回调（如调整大小事件）或其他情况下，这将非常有用。

与

或绑定-事件处理程序上的任何其他

一样使用它，但可以将一个额外参数作为最后一个参数传递：

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

您可以将
设置超时（）
和
清除超时（）
与以下各项结合使用：

更新

我编写了一个扩展来增强jQuery在

（&

bind

）事件处理程序上的默认

。如果在给定的时间间隔内未触发事件，它会将一个或多个事件的事件处理程序函数附加到选定元素。如果您希望仅在延迟后启动回调（如调整大小事件）或其他情况下，这将非常有用。

与

或绑定-事件处理程序上的任何其他

一样使用它，但可以将一个额外参数作为最后一个参数传递：

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

因为所选答案实际上不起作用。。如果您不使用jquery，这里有一个简单的节流函数，并举例说明如何在调整窗口大小时使用它

    function throttle(end,delta) {

    var base = this;

    base.wait = false;
    base.delta = 200;
    base.end = end;

    base.trigger = function(context) {

        //only allow if we aren't waiting for another event
        if ( !base.wait ) {

            //signal we already have a resize event
            base.wait = true;

            //if we are trying to resize and we 
            setTimeout(function() {

                //call the end function
                if(base.end) base.end.call(context);

                //reset the resize trigger
                base.wait = false;
            }, base.delta);
        }
    }
};

var windowResize = new throttle(function() {console.log('throttle resize');},200);

window.onresize = function(event) {
    windowResize.trigger();
}

因为选择的答案实际上不起作用。。如果您不使用jquery，这里有一个简单的节流函数，并举例说明如何在调整窗口大小时使用它

    function throttle(end,delta) {

    var base = this;

    base.wait = false;
    base.delta = 200;
    base.end = end;

    base.trigger = function(context) {

        //only allow if we aren't waiting for another event
        if ( !base.wait ) {

            //signal we already have a resize event
            base.wait = true;

            //if we are trying to resize and we 
            setTimeout(function() {

                //call the end function
                if(base.end) base.end.call(context);

                //reset the resize trigger
                base.wait = false;
            }, base.delta);
        }
    }
};

var windowResize = new throttle(function() {console.log('throttle resize');},200);

window.onresize = function(event) {
    windowResize.trigger();
}

我自己写了一个小包装器函数

onResize  =   function(fn) {
    if(!fn || typeof fn != 'function')
        return 0;

    var args    = Array.prototype.slice.call(arguments, 1);

    onResize.fnArr    = onResize.fnArr || [];
    onResize.fnArr.push([fn, args]);

    onResize.loop   = function() {
        $.each(onResize.fnArr, function(index, fnWithArgs) {
            fnWithArgs[0].apply(undefined, fnWithArgs[1]);
        });
    };

    $(window).on('resize', function(e) {
        window.clearTimeout(onResize.timeout);
        onResize.timeout    = window.setTimeout("onResize.loop();", 300);
    });
};

用法如下：

var testFn  = function(arg1, arg2) {
    console.log('[testFn] arg1: '+arg1);
    console.log('[testFn] arg2: '+arg2);
};

// document ready
$(function() {
    onResize(testFn, 'argument1', 'argument2');
});

我自己写了一个小包装器函数

onResize  =   function(fn) {
    if(!fn || typeof fn != 'function')
        return 0;

    var args    = Array.prototype.slice.call(arguments, 1);

    onResize.fnArr    = onResize.fnArr || [];
    onResize.fnArr.push([fn, args]);

    onResize.loop   = function() {
        $.each(onResize.fnArr, function(index, fnWithArgs) {
            fnWithArgs[0].apply(undefined, fnWithArgs[1]);
        });
    };

    $(window).on('resize', function(e) {
        window.clearTimeout(onResize.timeout);
        onResize.timeout    = window.setTimeout("onResize.loop();", 300);
    });
};

用法如下：

var testFn  = function(arg1, arg2) {
    console.log('[testFn] arg1: '+arg1);
    console.log('[testFn] arg2: '+arg2);
};

// document ready
$(function() {
    onResize(testFn, 'argument1', 'argument2');
});

您可以存储任何setInterval或setTimeout的引用id。像这样：

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

要在不使用“全局”变量的情况下执行此操作，可以将局部变量添加到函数本身。例：

$(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(doneResizing, 500);
});

function doneResizing(){
  $("body").append("<br/>done!");   
}

$（窗口）。调整大小（函数（）{
clearTimeout（this.id）；
this.id=设置超时（doneResizing，500）；
});
函数doneResizing（）{
$（“body”）.append（
完成！”）；
}
您可以存储任何se的引用id
$(window).resize(function() {
    var originalWindowSize = 0;
    var currentWidth = 0;

    var setFn = function () {
        originalWindowSize = $(window).width();
    };

    var checkFn = function () {
        setTimeout(function () {
            currentWidth = $(window).width();
            if (currentWidth === originalWindowSize) {
                console.info("same? = yes") 
                // execute code 
            } else {
                console.info("same? = no"); 
                // do nothing 
            }
        }, 500)
    };
    setFn();
    checkFn();
});

var resizeTimer;
$( window ).resize(function() {
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function() {
        //your code here
        resizeTimer = null;
        }, 200);
    });

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

var resizeEventsTrigger = (function () {
    function triggerResizeStart($el) {
        $el.trigger('resizestart');
        isStart = !isStart;
    }

    function triggerResizeEnd($el) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
            $el.trigger('resizeend');
            isStart = !isStart;
        }, delay);
    }

    var isStart = true;
    var delay = 200;
    var timeoutId;

    return function ($el) {
        isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
    };

})();

$("#my").on('resizestart', function () {
    console.log('resize start');
});
$("#my").on('resizeend', function () {
    console.log('resize end');
});

window.onresize = function () {
    resizeEventsTrigger( $("#my") );
};

(function ($) {
    var d = 250, t = null, e = null, h, r = false;

    h = function () {
        r = false;
        $(window).trigger('resizeend', e);
    };

    $(window).on('resize', function (event) {
        e = event || e;
        clearTimeout(t);

        if (!r) {
            $(window).trigger('resizestart', e);
            r = true;
        }

        t = setTimeout(h, d);
    });
}(jQuery));

var flag=true;
var timeloop;

$(window).resize(function(){
    rtime=new Date();
    if(flag){
        flag=false;
        timeloop=setInterval(function(){
            if(new Date()-rtime>100)
                myAction();
        },100);
    }
})
function myAction(){
    clearInterval(timeloop);
    flag=true;
    //any other code...
}

$(window).resize((function() { // This function is immediately invoked
                               // and returns the closure function.
    var timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            timeoutId = null; // You could leave this line out.
            // Code to execute on resize goes here.
        }, 100);
    };
})());

$(window).resize(function() {
    var thisFunction = arguments.callee;
    clearTimeout(thisFunction.timeoutId);
    thisFunction.timeoutId = setTimeout(function() {
        thisFunction.timeoutId = null; // You could leave this line out.
        // Code to execute on resize goes here.
    }, 100);
});

var tranStatus = false;
$(window).resizeend(200, function(){
    $(".cat-name, .category").removeAttr("style");
    //clearTimeout(homeResize);
    $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
      tranStatus = true;
    });
    processResize();
});

function processResize(){
  homeResize = setInterval(function(){
    if(tranStatus===false){
        console.log("not yet");
        $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
            tranStatus = true;
        }); 
    }else{
        text_height();
        clearInterval(homeResize);
    }
  },200);
}

$.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data('resizeTimeout')) {
            clearTimeout($this.data('resizeTimeout'));
        }
        $this.data('resizeTimeout', setTimeout(callback, timeout));
    });
};

        $(window).resize(function(){
            //call to resizeEnd function to execute function on resize end.
    //can be passed as function name or anonymous function
            resizeEnd(function(){



    });

        });

        //global variables for reference outside of interval
        var interval = null;
        var width = $(window).width();
    var numi = 0; //can be removed in production
        function resizeEnd(functionCall){
            //check for null interval
            if(!interval){
                //set to new interval
                interval = setInterval(function(){
        //get width to compare
                    width2 = $(window).width();
        //if stored width equals new width
                    if(width === width2){
                        //clear interval, set to null, and call passed function
                        clearInterval(interval);
                        interval = null; //precaution
                        functionCall();

                    }
        //set width to compare on next interval after half a second
                    width = $(window).width();
                }, 500);

            }else{
                //logging that should be removed in production
                console.log("function call " + numi++ + " and inteval set skipped");

            }

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);
    };
};

$(window).resize(function () { 
   debounce(function() {
          //...
    }, 500);
});

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(resizedEnded, 500);
});

function resizedEnded(){
    ...
}

private resizeId;
@HostListener('window:resize', ['$event'])
onResized(event: Event) {
  clearTimeout(this.resizeId);
  this.resizeId = setTimeout(() => {
    // Your callback method here.
  }, 500);
}