我如何在（window）.resize之后完全删除jquery函数

Question

I have created a function.
Which after resize the viewport, i want to remove the function completely.
The off() method only remove the code inside scroll event.
When i'm resizing viewport, it's keep print out "this is still execute after resize".
Can i remove "myFunction" completely after resize the viewport with or without destroy my function?

function myFunction(ele) {
    myArray = [];
    this.num1 = $.each(ele, function(){
        var posx = ele.offset().top;
        myArray.push(pos);
        console.log('this is still execute after resize');
        $(window).on('scroll', function(){
            // abcxyz
        });
    });
}

var target = $('p');
var run = new myFunction(target);

$(window).on('resize',function(){
    console.log("resized");
    $(window).off('scroll', myFunction(target));
});

Answer 1

This is a work around for delay checking using timer because there is no exact resize event as you are looking for. If you stops for 500ms then resize function calls. This may helps you

function myFunction(ele) {
myArray = [];
this.num1 = $.each(ele, function(){
    var posx = ele.offset().top;
    myArray.push(pos);
    console.log('this is still execute after resize');
    $(window).on('scroll', function(){
        // abcxyz
    });
});
}

var target = $('p');
var run = new myFunction(target);

var listenForStop = (function () {
    var timers = {};
    return function (callback, ms, uId) {
        if (timers[uId]) {
            clearTimeout(timers[uId]);
        }
        timers[uId] = setTimeout(callback, ms);
    };
})();

$(window).on('resize', function () {
    listenForStop(function () {
        $(window).off('scroll', myFunction(target));
    }, 500, "unique");
});

Answer 2

You can simply overide it to 'undefined' after resize.

function myFunction(ele) {
    myArray = [];
    this.num1 = $.each(ele, function(){
        var posx = ele.offset().top;
        myArray.push(pos);
        console.log('this is still execute after resize');
        $(window).on('scroll', function(){
            // abcxyz
        });
    });
}

var target = $('p');
var run = new myFunction(target);



  $(window).on('resize',function(){
        console.log("resized");
     if (typeof(myFunction) == "function"){
myFunction = undefined;
} 
    });

Edit:

What I suggest if what you need to reuse after it is to have the original function as backup. Then use the "power" of JS where functions are variables . Here the code you can try:

    function myFunctionBackup(ele) {
    myArray = [];
    this.num1 = $.each(ele, function(){
        var posx = ele.offset().top;
        myArray.push(pos);
        console.log('this is still execute after resize');
        $(window).on('scroll', function(){
            // abcxyz
        });
    });
}

var target = $('p');
var myFunction = myFunctionBackup;
myFunction(target);

  $(window).on('resize',function(){
        console.log("resized");
     if (typeof(myFunction) == "function"){
myFunction = undefined;
} 
    });

// When you want to return original simply do:
myFunction = myFunctionBackup;

Answer 3

to use the .off() function you must first instantiate the event with the .on() function follow example

function myFunction(ele) {
    myArray = [];
    this.num1 = $.each(ele, function(){
        var posx = ele.offset().top;
        myArray.push(pos);
        console.log('this is still execute after resize');
        $(window).on('scroll', function(){
            // abcxyz
        });
    });
}

var target = $('p');
var run = new myFunction(target);

$(function(){
   $(window).on('scroll', myFunction(target));
});

$(window).on('resize',function(){
    console.log("resized");
    $(window).off('scroll', myFunction(target));
});